document.write()

  以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉自己一句话,多点去尝试,别人说的不一定是对,自己想的也不一定是对的。

  下面是我做的几个测试,应该能说明关于document.write的用法了:

  1.关于清空的问题:

  (1)调用window.onload事件,清空原本文档内容:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        window.onload = function(){
          document.write("你要足够优秀,才能够支持其自己的梦想。");
        }
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  上面的代码的结果是:

  

  这种情况下会将原本的文档内容清空,因为使用了window.onload事件,当页面才加载完才去执行事件处理函数,这个时候文档流已经关闭了,这个时候执行document.write()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展示,这个就覆盖原本的内容了。

  (2)不调用window.onload事件,不清空文档原本内容:

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        document.write("你要足够优秀,才能够支持其自己的梦想。");
        document.write("<br/>");
        document.write("越努力,越幸运。");
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  运行结果:

  

  另一个代码:

  <!DOCTYPE html>

   <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
     <script type="text/javascript">
      document.write("你要足够优秀,才能够支持其自己的梦想。");
      document.write("<br/>");
      document.write("越努力,越幸运。");
    </script>
  </html>

  运行结果:

  

  上面的方法不会清空文档原本的内容,这是因为当前的文档流是浏览器所创建的,并且document.wirte()就在其中,在执行document.wirte()这个函数的时候文档流还没有被关闭,不用调用document.open()函数创建新的文档流,所以就不会被覆盖;就是说当文档里面的输入对象的文档流和document.wirte()函数的文档流是同一个的时候,document.wirte()函数就不会清空原本的文档内容,但是当浏览器创建的文档流关闭了之后document.wirte()函数要调用document.open()函数创建新的文档流的时候,原本文档中已经存在的写好的东西就会因此而清空。

  (3)不调用window.onload事件,并且先执行window.close()强制关闭文档流的情况:

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        document.close();
        document.write("你要足够优秀,才能够支持其自己的梦想。");
        document.write("<br/>");
        document.write("越努力,越幸运。");
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  执行结果:

  

  为什么使用window.close()函数关闭了文档流还是不会清空原本文档的内容呢?原因是文档流是浏览器创建的,无权手动关闭,document.close()函数只能关闭由document.write()函数创建的文档流。

  如果我们用下面的方法,利用window.close()函数关闭window.write()函数创建的文档流,就会清空原本的内容:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        function create(){
          var newWindow = window.open("","新开的页面","_blank");
          newWindow.document.write("你要足够优秀,才能够支持其自己的梦想。");
          newWindow.document.close();
          newWindow.document.write("越努力,越幸运。");
        }
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
      <input type="button" value="点击" onclick="create()">
    </body>
  </html>

  输入结果:

  

  这个时候newWindow.document.write()就会覆盖第二个newWindow.document.write()函数,这是因为第一个newWindow.document.write()已经被newWindow.document.close()关闭了文档流。

原文地址:https://www.cnblogs.com/loveya/p/5079700.html