为什么我需要使用 document.write 而不是 DOM 操作方法？答案

【问题标题】：Why do I need to use document.write instead of DOM manipulation methods?为什么我需要使用 document.write 而不是 DOM 操作方法？
【发布时间】：2013-12-19 04:42:03
【问题描述】：

我正在尝试一项新的广告服务，据我所知，他们不提供加载广告的功能界面。我们希望根据用户的屏幕尺寸显示不同的广告尺寸，而此服务要求您为每种尺寸加载不同的.js URL。

我最初尝试写作：

<script type="text/javascript"><!--
    var dochead = document.getElementsByTagName('head')[0];
    var newscript = document.createElement('script');
    newscript.type = "text/javascript";
    newscript.src = '//ads-by.madadsmedia.com/tags/22430/9194/async/' + (screen.width >= 1360 ? '160' : '120') + 'x600.js';
    dochead.appendChild(newscript);
    //-->
</script>

但我只是得到一个空白页。我查看了 Chrome 开发人员工具，它似乎可以正确加载他们的脚本。他们的脚本从 Google 加载其他脚本，并且它们也出现在 DOM 中。但是没有广告图片。

当我将脚本更改为：

<script language="JavaScript" type="text/javascript">
var prot = document.location.protocol;
var adwidth = (screen.width >= 1360 ? '160' : '120');
document.write('<script language="JavaScript" type="text/javascript"'); document.write('src="'+prot+'//ads-by.madadsmedia.com/tags/22430/9194/async/'+adwidth+'x600.js">'); document.write('<\/scr' + 'ipt>');
</script>

它工作正常。我一般不喜欢使用document.write，我想知道为什么在这种情况下需要它？广告服务的脚本大量使用document.write，这是为什么呢？

【问题讨论】：

很抱歉这么晚才回答，但我认为这是注意到您在第一行有一个 Javascript 语法错误。你应该有//<!--，而不是<!--。
我们不再使用该广告服务，所以这没有实际意义。还是谢谢。
但是，我查看了我们当前的广告页面，它们的脚本相似。他们有<script></script>

标签： javascript ads document.write

【解决方案1】：

因为他们正在使用document.write()：

http://ads-by.madadsmedia.com/tags/22430/9194/async/160x600.js:

if (!window.ActiveXObject){
  document.write("<div style=\"text-align: center; margin: 0px auto; width:160px; height:600px; position:relative;\">");
// etc.

如果document.write() 没有在线运行并主动“打开”文档，它将破坏那里的内容。因此，在加载后运行他们的脚本会用他们的内容覆盖您的内容。

【讨论】：

【解决方案2】：

如果他们的脚本使用document.write，它可能会导致页面变为空白，因为它会覆盖流。

document.write clears page

您可以覆盖 document.write 作为修复：（但我不会.....）

How to deal with document.write in a script that's added after a page has loaded?

【讨论】：

【解决方案3】：

如果文档正在加载，它的就绪状态是交互式的，但正文元素尚未完全解析。您不能将子元素添加到尚未加载的元素。这会导致错误并且脚本会停止。

dochead.appendChild(newscript);

快速解决方法是使用 body.onload 事件运行您的函数。将脚本移到页面底部可能会起作用，但在包含 Internet Explorer 和行为不佳的浏览器的世界中，我认为这并不可靠。

【讨论】：

脚本正在执行。我可以在里面设置一个断点，它就停在断点处。
您还需要查看被调用的脚本在做什么。也许他们执行 document.write 的原因是因为下一个脚本正在执行 document.write。您的问题的一个非答案但替代解决方案是创建一个