关于document.write()重写页面

时间 2019-11-20

标签关于 document.write document write 重写页面繁體版

原文原文链接

今天碰到了一个之前没注意的问题即：document.write()，在此拿来分享！javascript

document.write是最基本的JavaScript命令之一，这个命令简单地打印指定的文本内容到页面上（注意是页面，因此想用write指定具体打印到哪一个地方的同窗能够心凉了）。html

使用这个方法会碰到两个状态：一、添加内容到页面中；二、重写页面；为何出两种状态？java

页面在生成时有一个输入流的状态。在页面加载时这个状态是自动打开的，这时内容会从上至下添加内容。测试

此时调用document.write会把内容写进页面里面，但咱们不能准确控制加载的位置，只能根据write()方法调用的位置使其内容放入页面大概的位置。ui

例如：spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <script type="text/javascript">
10         document.write("我是输出内容！");
11     </script>
12     <h1>我是HTML标签内容！</h1>
13 </body>
14 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <h1>我是HTML标签内容！</h1>
10     <script type="text/javascript">
11         document.write("我是输出内容！");
12     </script>
13 </body>
14 </html>

而当页面加载完成后即window.onload后，会自动的运行document.close()方法关闭这个输入流，若是此时咱们再运行document.write会打开一个新的输入流在页面，此时会重写页面。code

（注意：重写的是body里面的内容）htm

因此，若是想添加内容，仍是用innnerHTML吧；blog

固然若是想重写页面，在window.onload后调用document.write就好了，但要记得在写完后调用close()方法关闭输入流，不关闭的话听说会阻挡图片的显示，但我没测试。图片

欢迎批评指正，有更好的想法多多交流~