zoukankan      html  css  js  c++  java
  • document.write()会清空原来的内容原因

    http://www.softwhy.com/forum.php?mod=viewthread&tid=13582

    <meta name="author" content="http://www.softwhy.com/" />      
    <title>蚂蚁部落</title>    
    <script type="text/javascript">  
    window.onload=function(){
      document.write("分享互助");
    }
    </script>
    </head>  
    <body>  
    <div>蚂蚁部落欢迎您</div>
    </body>  
    </html>

    从以上代码的可以看出document.write()函数将原来的文档内容清空了,下面介绍一下出现此种情况的原因: <meta name="author" content="http://www.softwhy.com/" />      
    <title>蚂蚁部落</title>    
    <script type="text/javascript">  
    document.write("分享互助");
    </script>
    </head>  
    <body>  
    <div>蚂蚁部落欢迎您</div>
    </body>  
    </html>

    在以上代码中,原来的文档内容并没有被清空,这是因为当前文档流是由浏览器所创建,

    并且document.wirte()函数身处其中,也就是执行此函数的时候文档流并没有被关闭,

    这个时候不会调用document.open()函数创建新文档流,所以也就不会被覆盖了。

    可能还有朋友会问为什么下面的方式还是不行,

    代码如下:
    <!DOCTYPE html>      
    <html>      
    <head>      
    <meta charset=" utf-8">      
    <meta name="author" content="http://www.softwhy.com/" />      
    <title>蚂蚁部落</title>    
    <script type="text/javascript">
    document.close();
    document.write("分享互助");
    </script>
    </head>  
    <body>  
    <div>蚂蚁部落欢迎您</div>
    </body>  
    </html>

    上面使用document.close()关闭文档流了,为什么还是不能够覆盖原来的内容的,很遗憾,文档流是由浏览器创建,

    无权限手动关闭,document.close()函数只能够关闭由document.open()函数创建的文档流。

    看下面的代码实例:
    <!DOCTYPE html>      
    <html>      
    <head>      
    <meta charset=" utf-8">      
    <meta name="author" content="http://www.softwhy.com/" />      
    <title>蚂蚁部落</title>      
    <script type="text/javascript">  
    function create(){  
      var newWindow=window.open("","蚂蚁部落","_blank");  
      newWindow.document.write("蚂蚁部落欢迎您");  
      newWindow.document.close();  
      newWindow.document.write("ABC");
    }  
    window.onload=function(){  
      var obt=document.getElementById("bt");  
      obt.onclick=function(){  
        create();  
      }  
    }  
    </script>  
    </head>  
    <body>  
    <div id="print">蚂蚁部落欢迎您,只有努力奋斗才会有美好的明天。</div>  
    <input type="button" id="bt" value="查看效果"/>  
    </body>  
    </html>

    由doucment.open()创建的文档流就可以由document.close()关闭,那么第二个document.write()输出的内容会覆盖掉第一个输出的内容。

  • 相关阅读:
    HTML5就是现在:深入了解Polyfills
    dot.js-js模板引擎使用,教程,入门
    js操作dom对象
    JavaScript中this详解
    浅谈JavaScript中的string拥有方法的原因
    函数定义方式
    Jquery的跨域调用
    数据结构与算法之美-排序(下)
    CLR via C#学习笔记-第十三章-定义接口、继承接口
    CLR via C#学习笔记-第十二章-可验证性和约束
  • 原文地址:https://www.cnblogs.com/golddemon/p/7457417.html
Copyright © 2011-2022 走看看