Using JavaScript's Document.Write with AJAX will overwrite the entire body content

Question

Using JavaScript's Document.Write with AJAX will overwrite the entire body content

I am currently working on implementing a basic ajax call that fetches the content of a specific url and inserts it into the page. However, I am encountering an issue where it replaces the entire body content with this retrieved information.

Below is the JavaScript code:

(function(){
    var mb = window.mb = {};

    function get_ad(url, parameters){
        var result = "";
        var http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) { // IE
            var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
            for (var i = avers.length -1; i >= 0; i--) {
                try {
                    http_request = new ActiveXObject(avers[i]);
                    if (http_request){
                        break;  
                    }
                } catch(e) {}
            }
        }
        if (!http_request) {
            alert('Cannot create XMLHTTP instance');
            return false;
        }

        http_request.onreadystatechange = function(){
                                              if (http_request.readyState == 4) {
                                                 if (http_request.status == 200) {
                                                    gen_output(http_request.responseText);
                                                 } else {
                                                    alert('Error');
                                                 }
                                              }
                                           }

        http_request.open('GET', url + parameters, true);
        http_request.send(null);
    }

    function gen_output(ad_content){
        document.write("<div id=\"mb_ad\">");
        document.write(ad_content);
        document.write("</div>");
    }

    get_ad("http://localhost/test/test.html", "");
})();

and here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    i am text before <br/>
    <script type="text/javascript" src="mb.js"></script>
    <br />
    i am text after 
</body>
</html>

Upon using firebug to inspect, only the <div id="mb_ad"> and content from the test.html page are visible. The text before and after do not display. If I eliminate the ajax call and simply use three document.writes, then the text before and after show up correctly. Keep in mind that jQuery is not an option, as I need to accomplish this without relying on a large library due to size and speed considerations.

javascript ajax

Answer 1

Answer №1

Avoid using document.write after the document has finished loading to prevent opening a new document that replaces the current one.

Instead, utilize the innerHTML property to insert HTML code into an element:

function display_ad(ad_content){
  document.getElementById('mb_ad').innerHTML = ad_content;
}

Ensure the element is placed before the script so it exists when the callback function is triggered:

i am text before
<div id="mb_ad"></div>
i am text after
<script type="text/javascript" src="mb.js"></script>

The placement of the script doesn't impact the outcome since nothing will be written to the document in that location.

Answer 2

Avoid using document.write after the document has finished loading to prevent opening a new document that replaces the current one.

Instead, utilize the innerHTML property to insert HTML code into an element:

function display_ad(ad_content){
  document.getElementById('mb_ad').innerHTML = ad_content;
}

Ensure the element is placed before the script so it exists when the callback function is triggered:

i am text before
<div id="mb_ad"></div>
i am text after
<script type="text/javascript" src="mb.js"></script>

The placement of the script doesn't impact the outcome since nothing will be written to the document in that location.

Answer 3

Answer №2

If you find yourself unable to control the remote script, there may be a way to implement a workaround like this:

<script>
var tmp = document.write;

document.write = function () {
  document.getElementById('someId').innerHTML = [].concat.apply([], arguments).join('');
};
</script>
<script .....>
document.write = tmp;

Although it's not the most elegant solution, this hack appears to do the trick...

Answer 4

If you find yourself unable to control the remote script, there may be a way to implement a workaround like this:

<script>
var tmp = document.write;

document.write = function () {
  document.getElementById('someId').innerHTML = [].concat.apply([], arguments).join('');
};
</script>
<script .....>
document.write = tmp;

Although it's not the most elegant solution, this hack appears to do the trick...

Answer 5

Answer №3

const newDiv = document.createElement('div');
newDiv.id = 'custom_ad';
newDiv.innerHTML = ad_data;

You are now free to place this element in any location on your webpage.

Answer 6

const newDiv = document.createElement('div');
newDiv.id = 'custom_ad';
newDiv.innerHTML = ad_data;

You are now free to place this element in any location on your webpage.

Answer 7

Answer №4

If you want to dynamically add HTML code to a webpage, one way to do it is by using the following script:

<script>document.body.innerHTML+="//Insert Your HTML Code Here";</script>

Answer 8

If you want to dynamically add HTML code to a webpage, one way to do it is by using the following script:

<script>document.body.innerHTML+="//Insert Your HTML Code Here";</script>

Answer 9

Answer №5

Similar solution by Leon Fedotov but with added jQuery elements

{
  var previous_document_write = document.write;

  var $zone = $('.zone.zone_' + name);
  // redefining document.write within this function
  document.write = function () {
    $zone.append([].concat.apply([], arguments).join(''));
  };
  // OA_output[name] might contain unsafe document.write calls
  $zone.html(OA_output[name]);

  document.write = previous_document_write;
}

Answer 10

Similar solution by Leon Fedotov but with added jQuery elements

{
  var previous_document_write = document.write;

  var $zone = $('.zone.zone_' + name);
  // redefining document.write within this function
  document.write = function () {
    $zone.append([].concat.apply([], arguments).join(''));
  };
  // OA_output[name] might contain unsafe document.write calls
  $zone.html(OA_output[name]);

  document.write = previous_document_write;
}

Answer 11

Answer №6

Encountered a similar issue with this code snippet:

$content[] = '<script>
           if($("#mf_dialogs").length == 0) {
               document.write("<div id=\"mf_dialogs\"></div>");
           }
           </script>';

Consider using this alternative code for better efficiency:

$content = '<div id="dialogContainer"></div>
         <script>
              if($("#mf_dialogs").length == 0) {
                  document.getElementById("dialogContainer").innerHTML="<div id=\"mf_dialogs\"></div>";
              }
         </script>';

Answer 12

Encountered a similar issue with this code snippet:

$content[] = '<script>
           if($("#mf_dialogs").length == 0) {
               document.write("<div id=\"mf_dialogs\"></div>");
           }
           </script>';

Consider using this alternative code for better efficiency:

$content = '<div id="dialogContainer"></div>
         <script>
              if($("#mf_dialogs").length == 0) {
                  document.getElementById("dialogContainer").innerHTML="<div id=\"mf_dialogs\"></div>";
              }
         </script>';

Answer 13

Answer №7

A method to mimic the behavior of document.write involves the use of the following code snippet:

<script>
  (function(script) {
    var parent = script.parentNode;
    var node = document.createTextNode('Unexpected!');
    parent.replaceChild(node, script);
  })(document.currentScript);
</script>

With this approach, you can insert any HTML content instead of a script element. For simpler scenarios where you can wrap a script within another tag, an even more straightforward version can be utilized.

<script>
  document.currentScript.parentElement.innerHTML = 'Unexpected!';
</script>

Answer 14

A method to mimic the behavior of document.write involves the use of the following code snippet:

<script>
  (function(script) {
    var parent = script.parentNode;
    var node = document.createTextNode('Unexpected!');
    parent.replaceChild(node, script);
  })(document.currentScript);
</script>

With this approach, you can insert any HTML content instead of a script element. For simpler scenarios where you can wrap a script within another tag, an even more straightforward version can be utilized.

<script>
  document.currentScript.parentElement.innerHTML = 'Unexpected!';
</script>

Using JavaScript's Document.Write with AJAX will overwrite the entire body content

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

What is the best way to store and serve the AngularJS library locally in a static manner?

Trigger functions when the window is scrolled, resized, or when the document is fully loaded

Is it possible to perform direct URL searches using react-router-dom?

JS/Docker - The attribute 'user' is not recognized in the context of 'Session & Partial<SessionData>'

Having trouble retrieving responseText from an AJAX request using Laravel

Displaying database records in custom fragments using Spring Boot and Thymeleaf

Vue.js - Error: Module not found: Cannot locate module 'lottie-vuejs'

Choose the div without a class

Issue with scrollTop not functioning when using onclick on an <a> tag within a div

The CheckboxTable component in material UI fails to update when there is a change in props

When attempting to pass Rgraph image data through a jQuery AJAX call, a 403 Forbidden error is being

Looking to showcase Unicode characters with jQuery AJAX - here's how!

Performing a database query with jQuery AJAX

When a label tag is used to surround a radio button, it will hinder the radio button's ability to trigger a "change" event listener in JavaScript

I discovered that the chips' content was in need of updating once I selected the content from the menu

Unable to integrate bootstrap with webpack

Tips for utilizing the 'contains' feature within web elements with Java Selenium WebDriver?

Create a NodeJS script that sends a socket message upon receiving parameters from a URL

The handleSumbit feature seems to be malfunctioning in a React Native application that utilizes React-Hook-Form in combination with yup

To retrieve the value of an element in the Response tab of the Network tab in Google Chrome's developer tools, I am looking to use JavaScript, TypeScript, or Cypress