初春的晚上，闲来无事，聊聊 document.write 方法。

document.write 使用方式非常简单，把 "字符串化"（不好意思，这可能是我自己创造的名词）的 html 代码当做参数传入就 ok 了，我并不打算讲它的基本用法，可以参考以下链接：

document.write 经常会被用来加载脚本，比如这样：

var url = 'http://ads.com/buyme?rand='+Math.random()
document.write('<script src="'+url+'"></scr'+'ipt>')

传统方式：

var script = document.createElement('script')
script.src = 'http://ads.com/buyme?rand='+Math.random()
// now append the script into HEAD, it will fetched and executed
document.documentElement.firstChild.appendChild(script)

对比 dom 插入的传统方法，的确能少几行代码。这样做还有个好处，它比 dom 插入的方式快，因为它是在一个输出流中，所以不用修改 dom 结构（It is very fast, because the browser doesn’t have to modify an existing DOM structure）。但是，如果这段脚本没有执行完，后续渲染都将挂起！

document.write 加载脚本也不是没有合适的场景，比如说后续的渲染都要依赖这段脚本，那么这样写就完全没有问题。比如这段代码：

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

或者：

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

非常的优雅。

还有个应用场景，加载第三方广告，百度联盟的广告就是用该方法输出的。我们假设百度联盟广告如下（另存为 cm.js）：

document.write("<img src='ad.jpg /'>");

那么我们在页面任意部分同步加载这段代码，就能显现百度广告，事实上，体验是非常差的，因为是同步渲染，如果这段代码没有执行完，后续是不会执行下去的（UI 挂起）。尝试着将内含 document.write 的脚本文件异步执行，写个简单的 demo。

index.htm 文件：

<body>
Hello
<script>
  var s = document.createElement("script");
  s.src = "data.js";
  document.body.appendChild(s);
</script>
</body>

data.js 文件：

document.write('World');

页面只显示了 Hello 字样，控制台打印 notice 如下（详见 stackoverflow）：

按照 notice 的提示将 document.open() 加入 data.js 文件，这时页面就只有 World 了。我去，异步加载个 js，替换这个页面，这样的操作应该几乎没有吧！所以，看起来百度的广告只能同步加载了，如果延迟加载（用个 setTimeout 方法）用到 document.write 的文件，那么理论上会覆盖整个页面吧，这是我们不希望看到的，也是我们要谨慎使用该方法的原因（ Why is document.write considered a “bad practice”?）。

用 document.write 加载脚本文件，甚至还涉及到浏览器的兼容性，不同的浏览器会用不同的顺序加载，这点不展开了，有兴趣的可以参考如下链接：

最后总结下吧，如果用 document.write 来渲染页面，可以适当适时的使用，如果是加载脚本，尽量别用了，毕竟 stevesouders 建议别用（Don’t docwrite scripts），主要还是为了不影响后续的加载。

附以前写的草稿：

document.write 是 document 下的一个方法，很多入门书籍中经常见到该方法，实际生产中却很少用到。

document.write() 接收一个字符串作为参数，将该字符串写入文档流中。一旦文档流已经关闭（document.close()），那么 document.write 就会重新利用 document.open() 打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建 DOM 并渲染新的页面。

向文档流中写入 HTML 字符串：

<div>
  <script>
    document.write("<script src='cm.js'><\/script>");
    document.write("<div class='add'></div>")
  </script>
</div>

因为 document.write 方法作用时，文档流还没关闭，所以并不用先 document.open()。渲染完后页面 dom 结构（ chrome下 需考虑浏览器兼容性）：

<div>
  <script>
    document.write("<script src='cm.js'><\/script>");
    document.write("<div class='add'></div>")
  </script>
  <script src="cm.js"></script>
  <div class="add"></div>
</div>

这里还需要 注意一点，当 document.write 的字符串参数包含 script 标签时，注意要转义，或者将 </script> 割开（split），比如 document.write("<script src='cm.js'></" + "script>");，这是因为一旦遇到 </script>，会自动与包裹该段代码的 <script> 进行配对。详见 这里。

再看个例子：

<div>
  <p>hello world</p>
</div>
<script>
  setTimeout(function() {
    document.write('<a href="http://www.cnblogs.com/zichi/">zichi\'s blog</a>');
  }, 0);
</script>

因为当 setTimeout 的回调执行时，文档流已经关闭（页面已经解析完），所以首先自动调用 document.open() 函数打开文档流，然后将文档流清空，渲染新的东西，即字符串中的 a 标签。

既然不加 document.open() 也会自动开启文档流，那么 document.open() 以及 document.close() 是否没用武之地了呢？思考如下代码。

代码一：

<div>
  <p>hello world</p>
</div>
<script>
  setTimeout(function() {
    document.write('a');
    document.write('b');
  }, 0);
</script>

代码二：

<div>
  <p>hello world</p>
</div>
<script>
  setTimeout(function() {
    document.open();
    document.write('a');
    document.close();

    document.open();
    document.write('b');
    document.close();
  }, 0);
</script>

前者页面显示 "ab"，而后者显示 "b"。可以想象前者两个 document.write 在一个文档流中输出，而后者手动关闭文档流，所以相当于重写了两次。

继续看：

<div>
  <p>hello world</p>
</div>
<script>
  document.open();
  document.write('a');
  document.close();

  document.open();
  document.write('b');
  document.close();
</script>

页面上 "hello world" 和 "ab" 都在。可以想象，当页面初次载入，浏览器还没解析完时，就算手动关闭文档流，也是关不掉的。

闲扯 『 document.write 』的更多相关文章

  1. 似魔鬼的 『 document.write 』

    在平时的工作中,楼主很少用 document.write 方法,一直觉得 document.write 是个危险的方法.楼主不用,并不代表别人不用,最近给维护的项目添了一点代码,更加深了我对 &quo ...

  2. 拾遗：『Linux Capability』

    『Linux Capability』 For the purpose of performing permission checks, traditional UNIX implementations ...

  3. 『创意欣赏』20款精致的 iOS7 APP 图标设计

    这篇文章给大家分享20款精致的 iOS7 移动应用程序图标,遵循图形设计的现代潮流,所有图标都非常了不起,给人惊喜.通过学习这些移动应用程序图标,设计人员可以提高他们的创作,使移动用户界面看起来更有趣 ...

  4. 『设计前沿』14款精致的国外 iOS7 图标设计示例

    每天都有大量的应用程序发布到 iOS App Store 上,在数量巨大的应用中想要引起用户的主要,首要的就是独特的图标设计.这篇文章收集了14款精致的国外 iOS7 图标设计示例,希望能带给你设计灵 ...

  5. Github 恶搞教程（一起『玩坏』自己的 Github 吧）

    最近在伯乐在线读到一篇趣文,<如何在 Github『正确』做贡献>,里面各种能人恶搞 Github 的『Public contributions』,下面截取几个小伙伴的战绩: 顺藤摸瓜,发 ...

  6. 『创意欣赏』30幅逼真的 3D 虚拟现实环境呈现

    又到周末了,给大家分享30幅漂亮的 3D 虚拟现实环境呈现,放松一下.这些创造性的场景都是通过 3D 图形设计软件,结合三维现实环境渲染制作出来的.一起欣赏:) 您可能感兴趣的相关文章 20幅温馨浪漫 ...

  7. [TYVJ1827]『Citric II』一道防AK好题

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 第二届『Citric杯』NOIP提高组模拟赛第一题 描述 Lemon认为在第一届『Citric』杯模拟赛中出的 ...

  8. 办理滑铁卢大学(本科)学历认证『微信171922772』UW学位证成绩单使馆认证University of Waterloo

    办理滑铁卢大学(本科)学历认证『微信171922772』UW学位证成绩单使馆认证University of Waterloo QQ/微信171922772办理毕业证成绩单.真实使馆及教育部学历认证★诚 ...

  9. 办理渥太华大学(本科)学历认证『微信171922772』Ottawa U学位证成绩单使馆认证University of Ottawa

    办理渥太华大学(本科)学历认证『微信171922772』Ottawa U学位证成绩单使馆认证University of Ottawa QQ/微信171922772办理毕业证成绩单.真实使馆及教育部学历 ...

随机推荐

  1. Android海康监控视频调用demo

    一. 开发环境 1. 操作系统:windows7(X64) 2. 开发工具:eclipse adt Build: v22.2.1-833290 JDK7 android SDK 3. 客户端设备版本: ...

  2. javascript多态 - 类形式实现demo

    /* *多态 * 对传入的参数做判断以实现多种调用方式 */ //类形式实现 function Add(){ function zero(){ return 10; } function one(nu ...

  3. php 升级到 5.3+ 后出现的一些错误，如 ereg(); ereg_replace(); 函数报错

    在php5.3环境下运行,常常会出现 Deprecated: Function ereg() is deprecated in...和Deprecated: Function ereg_replace ...

  4. python-1 python基础知识

    python第一课代码笔记 hello world [root@heartbeat-data- python]# vim hello1.py #!/usr/bin/env python print ( ...

  5. iOS MJRefresh下拉刷新（上拉加载）使用详解

    下拉刷新控件目前比较火的有好几种,本人用过MJRefresh 和 SVPullToRefresh,相对而言,前者比后者可定制化.拓展新都更高一点. 因此本文着重讲一下MJRefresh的简单用法. 导 ...

  6. NOIP2002矩形覆盖[几何DFS]

    题目描述 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n＝4 时,4个点的坐标分另为:p1(1,1),p2(2,2),p3(3,6),P4(0,7),见图一. 这 ...

  7. JavaScript RegExp 对象

    JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的 ...

  8. 嵌入式Linux驱动学习之路(九)Linux系统调用、驱动程序框架

    应用程序通过open  read  write close 等函数来操作计算机硬件.类似是一个接口. 当应用程序调用这些接口程序时,计算机是如何进入内核的呢?这是经过了系统调用. 实际上当调用接口函数 ...

  9. Java之线程处理之二

    No.1编写一个打印机类 写两个方法 public class Printer { public void print1() { System.out.print("微"); Sy ...

  10. SQL注入技术专题—由浅入深【精华聚合】

    作者:坏蛋链接:https://zhuanlan.zhihu.com/p/23569276来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 不管用什么语言编写的Web应用 ...