Menu
I am creating a simple ajax call that retrieves the content of a specified url and writes it to the page. The problem I am having is that it replaces the entire body contents with this information
here is the JS:
(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> using firebug to inspect, i do not see the text before or the text after, just the <div id="mb_ad"> and the content from the test.html page. If i remove the ajax call and just do 3 document.writes the text before and the text after will display properly. jQuery is not an option, I have to do this without the help of a large library as size and speed are of the essence.
758
write() are encountered, DOM construction must be halted because the browser has to wait for such resources to download, parse, and execute. If the script then dynamically injects another script, the browser is forced to wait even longer for the resource to download. Using document.
document. write() puts the contents directly to the browser where the user can see it. document. innerHTML is changing the HTML of the object you apply it to.
You can't use document.write once the document has completed loading. If you do, the browser will open a new document that replaces the current.
Use the innerHTML property to put HTML code inside an element:
function gen_output(ad_content){ document.getElementById('mb_ad').innerHTML = ad_content; } Put the element before the script, so that you are sure that it exists when the callback function is called:
i am text before <div id="mb_ad"></div> i am text after <script type="text/javascript" src="mb.js"></script> It doesn't matter much where you place the script, as nothing will be written to the document where it is.
173
in case you cant control the remote script you might be able to write something like so:
<script> var tmp = document.write; document.write = function () { document.getElementById('someId').innerHTML = [].concat.apply([], arguments).join(''); }; </script> <script .....> document.write = tmp; Well it is a nasty hack but it seems to work...
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
