admin管理员组

文章数量:1573363

网址：

此方法可以向文档写入HTML代码或者JavaScript代码。

语法结构：

     
     
      
      
       
       [JavaScript] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              1 
             
             
              
              document.write(exp1,exp2,exp3,....)

参数解析：

（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。

浏览器支持:

（1）.IE浏览器支持此属性。

（2）.edge浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.opera浏览器支持此属性。

（5）.火狐浏览器支持此属性。

（6）.safria浏览器支持此属性。

代码实例：

     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
             
              
              <!DOCTYPE html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              meta  
              name 
              = 
              "author"  
              content 
              = 
              "http://www.softwhy/"  
              /> 
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              > 
              
              
              < 
              script 
              >  
              
              
              document.write("蚂蚁部落二"); 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >  
              
              
              < 
              body 
              >  
              
              
              蚂蚁部落一 
              
              
              </ 
              body 
              >  
              
              
              </ 
              html 
              >

上面代码可以在文档中追加"蚂蚁部落二"，为了更加直观，可以在要插入的地方放置JavaScript代码：

     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
             
              
              <!DOCTYPE html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              meta  
              name 
              = 
              "author"  
              content 
              = 
              "http://www.softwhy/"  
              /> 
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              > 
              
              
              </ 
              head 
              >  
              
              
              < 
              body 
              >  
              
              
              蚂蚁部落一 
              
              
              < 
              script 
              > 
              
              
              document.write("蚂蚁部落二"); 
              
              
              </ 
              script 
              >  
              
              
              </ 
              body 
              >  
              
              
              </ 
              html 
              >

上面代码可以在指定的位置插入字符串。

清空原来的内容原因：

很多人遇到过这样类似的情况，document.write方法向网页写内容的时候，会把文档中的原来的内容清空。这对于初学者来说算是一个困扰，下面就介绍一下为什么会出现此情况，当然也就知道如何避免此种情况的发生。

首先看一段代码实例：

     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
             
              
              <!DOCTYPE html>       
              
              
              < 
              html 
              >       
              
              
              < 
              head 
              >       
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              >       
              
              
              < 
              meta  
              name 
              = 
              "author"  
              content 
              = 
              "http://www.softwhy/"  
              />       
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >      
              
              
              < 
              script 
              >   
              
              
              window.onload=function(){ 
              
              
                 
              document.write("蚂蚁部落"); 
              
              
              } 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >   
              
              
              < 
              body 
              >   
              
              
              < 
              div 
              >www.softwhy</ 
              div 
              >  
              
              
              </ 
              body 
              >   
              
              
              </ 
              html 
              >

document.write方法将原来的文档内容清空了，原因如下：

window.onload事件是在文档内容完全加载完毕触发，当然文档流已经关闭，这个时候执行doucment.write方法会自动调用document.open方法创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。不过很多朋友还会有如下疑问，为什么类似下面的情况，原来网页中的内容不会被覆盖，代码实例如下：

     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
             
              
              <!DOCTYPE html>       
              
              
              < 
              html 
              >       
              
              
              < 
              head 
              >       
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              >       
              
              
              < 
              meta  
              name 
              = 
              "author"  
              content 
              = 
              "http://www.softwhy/"  
              />       
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >      
              
              
              < 
              script 
              >   
              
              
              document.write("蚂蚁部落"); 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >   
              
              
              < 
              body 
              >   
              
              
              < 
              div 
              >www.softwhy</ 
              div 
              >  
              
              
              </ 
              body 
              >   
              
              
              </ 
              html 
              >

原来的文档内容并没有被清空，因为当前文档流是由浏览器所创建，并且document.wirte方法身处其中，也就是执行此方法的时候文档流并没有被关闭，这个时候不会调用document.open方法创建新文档流，所以也就不会被覆盖。可能还有朋友会问为什么下面的方式还是不行，代码实例如下:

     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
             
              
              <!DOCTYPE html>       
              
              
              < 
              html 
              >       
              
              
              < 
              head 
              >       
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              >       
              
              
              < 
              meta  
              name 
              = 
              "author"  
              content 
              = 
              "http://www.softwhy/"  
              />       
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >      
              
              
              < 
              script 
              > 
              
              
              document.close();  
              
              
              document.write("蚂蚁部落"); 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >   
              
              
              < 
              body 
              >   
              
              
              < 
              div 
              >www.softwhy</ 
              div 
              >  
              
              
              </ 
              body 
              >   
              
              
              </ 
              html 
              >

使用document.close关闭文档流，为什么还是不能覆盖原来的内容，因为文档流是由浏览器创建，无权限手动关闭，document.close方法只能够关闭由document.open方法创建的文档流。看如下代码实例:

     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
        
 
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
             
              
              <!DOCTYPE html>        
              
              
              < 
              html 
              >        
              
              
              < 
              head 
              >        
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              >        
              
              
              < 
              meta  
              name 
              = 
              "author"  
              content 
              = 
              "http://www.softwhy/"  
              />        
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >       
              
              
              < 
              script 
              >    
              
              
              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方法输出的内容会覆盖掉第一个输出的内容。


本文标签： 清空原因内容Documentwrite

版权声明：本文标题：document.write用法与清空原来的内容原因 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727746352a1127849.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。