为什么document.write被认为是"不好的做法"？

Question

我知道document.write被认为是不好的做法; 我希望编制一份提交给第三方供应商的理由清单,说明为什么他们不应该document.write在分析代码的实现中使用它们.

请在下面提供您声称document.write为不良做法的理由.

Answer 1

一些比较严重的问题:

• document.write(以下称DW)在XHTML中不起作用

• DW不直接修改DOM,阻止进一步操纵 (试图找到这个的证据,但它最好是情境)

• 页面加载完成后执行的DW将覆盖页面,或者写一个新页面,或者不起作用

• DW执行遇到的地方:它不能在给定节点处注入

• DW有效地编写序列化文本,这不是DOM在概念上的工作方式,并且是一种创建错误的简单方法(.innerHTML也有同样的问题)

使用安全和DOM友好的DOM操作方法要好得多

Answer 2

实际上document.write,本身没有任何问题.问题是滥用它真的很容易.甚至,甚至.

对于提供分析代码的供应商(如Google Analytics)而言,它实际上是分发此类代码段的最简单方式

1. 它使脚本保持较小
2. 他们不必担心覆盖已经建立的onload事件或包括必要的抽象来安全地添加onload事件
3. 它非常兼容

根据document.write我的拙见,只要你在文件加载后没有尝试使用它,就不是天生就是邪恶的.

Answer 3

另一个合法用途document.write来自HTML5 Boilerplate index.html示例.

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

我也看到了使用json2.js JSON解析/ stringify polyfill(IE7及以下版本所需)的相同技术.

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>

Answer 4

它可以阻止您的页面

document.write仅在页面加载时有效; 如果在页面加载完成后调用它,它将覆盖整个页面.

这实际上意味着您必须从内联脚本块调用它 - 这将阻止浏览器处理后面页面的部分内容.在写入块完成之前,不会下载脚本和图像.

Answer 5

优点:

• 这是从外部(到您的主机/域)脚本嵌入内联内容的最简单方法.
• 您可以覆盖框架/ iframe中的整个内容.在更广泛地使用现代Ajax技术(1998-2002)之前,我曾经常常将这种技术用于菜单/导航部分.

缺点:

• 它将呈现引擎序列化以暂停,直到加载所述外部脚本,这可能比内部脚本花费更长的时间.
• 它通常以这样的方式使用,即脚本放在内容中,这被认为是错误的形式.

Answer 6

这是我的双重价值,一般来说你不应该document.write用于繁重的举重,但有一个例子肯定是有用的:

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

我最近发现这个尝试创建一个AJAX滑块库.我创建了两个嵌套的div,并使用JS 应用width/ height和overflow: hidden外部<div>.这样,如果浏览器禁用了JS,div就会浮动以容纳图库中的图像 - 一些优雅的降级.

事情就像上面的文章一样,这个JS劫持CSS并没有启动,直到页面加载,导致div加载时出现瞬间闪现.所以我需要在加载页面时编写CSS规则或包含工作表.

显然,这在XHTML中不起作用,但由于XHTML似乎是一个死胡同(并在IE中呈现为标签汤),因此可能值得重新评估您选择的DOCTYPE ......

Answer 7

它使用XML呈现(如XHTML页面)来分解页面.

最佳:一些浏览器切换回HTML呈现,一切正常.

可能:某些浏览器在XML呈现模式下禁用document.write()函数.

最糟糕的是:每当使用document.write()函数时,某些浏览器都会触发XML错误.

Answer 8

它会覆盖页面上的内容,这是最明显的原因,但我不会称之为"糟糕".

除非您使用JavaScript创建整个文档,否则它没有多大用处,在这种情况下,您可以从document.write开始.

即便如此,当你使用document.write时,你并没有真正利用DOM - 你只是将一大块文本转储到文档中,所以我说它是糟糕的形式.

Answer 9

脱离我的头顶:

1. document.write需要在页面加载或正文加载中使用.因此,如果您想在任何其他时间使用该脚本来更新您的页面内容document.write几乎没用.

2. 从技术上讲,document.write只会更新HTML页面而不是XHTML/XML.IE似乎对这个事实很宽容,但其他浏览器不会.

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Answer 10

在某些情况下，Chrome 可能会阻止document.write插入脚本。发生这种情况时，它将在控制台中显示此警告：

一个解析器阻塞的跨源脚本，...，通过 document.write 调用。如果设备的网络连接较差，则浏览器可能会阻止此操作。

参考：

• Developers.google.com 上的这篇文章提供了更多详细信息。
• https://www.chromestatus.com/feature/5718547946799104