Question

我正在创建一个简单的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>

使用firebug进行检查，我看不到之前的文本或之后的文本，只看到<div id="mb_ad">和test.html页面中的内容。如果我删除了ajax调用并且之前只执行3 document.writes文本，之后的文本将正确显示。 jQuery不是一个选项，我必须在没有大型库的帮助下这样做，因为大小和速度是最重要的。

Answer 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>

放置脚本的位置并不重要，因为没有任何内容会写入文档。

Answer 2

如果您无法控制远程脚本，您可以编写类似的内容：

<script>
var tmp = document.write;

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

嗯这是一个令人讨厌的黑客，但它似乎工作......

Answer 3

var div = document.createElement('div');
div.id = 'mb_ad';
div.innerHTML = ad_content;

现在，您可以将此节点附加到您想要的任何位置。

Answer 4

您可以使用<script>document.body.innerHTML+="//Your HTML Code Here";</script>

Answer 5

同样的Leon Fedotov回答了更多jQuery

{
  var old_write = document.write;

  var $zone = $('.zone.zone_' + name);
  // redefine document.write in this closure
  document.write = function () {
    $zone.append([].concat.apply([], arguments).join(''));
  };
  // OA_output[name] contains dangerous document.write
  $zone.html(OA_output[name]);

  document.write = old_write;
}

Answer 6

我在以下代码中遇到了同样的问题：

this.options = {
      chart: {
        type: 'column'
      },
      credits: {
        enabled: false
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      tooltip: {
        enabled: false
      },
      xAxis: {
        categories:  [ "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06",
        "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13",
        "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20",
        "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27",
        "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31" ],
        tickLength: 40
      },
      yAxis: {
        tickPositions: [0, 4, 8, 10],
        title: {
            text: ''
        }
      },
      plotOptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          allowPointSelect: true,
          states: {
            select: {
              color: null,
              borderWidth: 1,
              borderColor: 'Blue'
            }
          },
          pointWidth: 30,
          dataLabels: {
            useHTML: true,
            enabled: true,
            color: 'black',
            verticalAlign: 'top',
            formatter: function() {
              if(moment().isBefore(this.point.category.date)) {
                return;
              } else {
                if (this.point.category.status === 'now') {
                  this.point.borderColor = 'blue';
                }
                if (this.y !== 0) {
                  return this.y;
                }
              }
            }
          },
          cursor: 'pointer',
        }
      },
      series: [
        {
          name: 'Diff',
          color: 'rgba(255, 255, 255, 0.8)',
          borderColor: 'rgb(194, 194, 194)',
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 8, 0, 0, 8, 8, 8, 7, 8, 0, 0, 8],
        },
        {
          name: 'Weekend',
          color: 'rgba(194, 194, 194, 0.4)',
          borderColor: 'rgb(194, 194, 194)',
          borderWidth: 1,
          data: [8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0],
        },
        {
          name: 'Overtimes',
          color: 'rgba(243, 183, 74, 0.8)',
          borderColor: 'rgb(194, 194, 194)',
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        },
        {
          name: 'Loged hours',
          color: 'rgba(26, 179, 148, 0.8)',
          borderColor: 'rgb(26, 179, 148)',
          borderWidth: 1,
          data: [0, 0, 5, "7.25", 8, 7, 7, 0, 0, 0, 3, 8, 8, 8, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

        },
        {
          name: 'NPA',
          color: 'rgba(28, 132, 198, 0.8)',
          borderColor: 'rgb(28, 132, 198)',
          borderWidth: 1,
          data: [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: 'No report',
          color: 'rgba(255, 255, 255, 0.8)',
          borderColor: 'rgb(237, 85, 101)',
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: 'Report not send',
          color: 'rgba(237, 85, 101, 0.8)',
          borderColor: 'rgb(237, 85, 101)',
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        }
      ]
    };

以下代码有效地替换了document.write：

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

Answer 7

您可以在某种程度上模拟 document.write 的方式是以下代码：

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

通过这种方式，您可以将任意 HTML 替换为 script 元素。如果您有更简单的情况，例如您可以将脚本包装在另一个标签中，您可以做更简单的版本。

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

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

7 个答案: