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屋!