JavaScript Document.Write 在使用 AJAX 时替换所有正文内容 [英] JavaScript Document.Write Replaces All Body Content When Using AJAX
问题描述
我正在创建一个简单的 ajax 调用，它检索指定 url 的内容并将其写入页面.我遇到的问题是它用此信息替换了整个正文内容
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
这里是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", "");
})();
这是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>
使用萤火虫检查，我没有看到之前或之后的文本，只有 <div id="mb_ad"> 和 test.html 页面中的内容.如果我删除 ajax 调用并只执行 3 document.writes 之前的文本和之后的文本将正确显示.jQuery 不是一种选择，我必须在没有大型库帮助的情况下完成此操作，因为大小和速度至关重要.
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.
推荐答案
一旦文档完成加载，您将无法使用 document.write.如果这样做，浏览器将打开一个新文档来替换当前文档.
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.
使用 innerHTML 属性将 HTML 代码放入元素中:
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.
这篇关于JavaScript Document.Write 在使用 AJAX 时替换所有正文内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
