使用AJAX时，JavaScript Document.Write替换所有正文内容

小编典典

使用AJAX时，JavaScript Document.Write替换所有正文内容

javascript

我正在创建一个简单的ajax调用，该调用检索指定url的内容并将其写入页面。我遇到的问题是它用此信息替换了整个体内的内容

这是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不是一个选择，我必须在没有大型库帮助的情况下执行此操作，因为大小和速度至关重要。

阅读 359

2020-05-01

共1个答案

小编典典

document.write文档加载完成后，您将无法使用。如果这样做，浏览器将打开一个新文档，以替换当前文档。

使用该innerHTML属性将HTML代码放入元素中：

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

将元素放在脚本之前，以确保在调用回调函数时该元素存在：

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

放置脚本的位置无关紧要，因为不会将任何内容写入到文档中。

2020-05-01