document.write用法与清空原来的内容原因

最新推荐文章于 2023-08-02 16:31:23 发布

Captain__李

最新推荐文章于 2023-08-02 16:31:23 发布

阅读量2.5k

点赞数

分类专栏： html

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网址：蚂蚁部落

此方法可以向文档写入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.com/"  
              /> 
              
              
              < 
              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.com/"  
              /> 
              
              
              < 
              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.com/"  
              />       
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >      
              
              
              < 
              script 
              >   
              
              
              window.onload=function(){ 
              
              
                 
              document.write("蚂蚁部落"); 
              
              
              } 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >   
              
              
              < 
              body 
              >   
              
              
              < 
              div 
              >www.softwhy.com</ 
              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.com/"  
              />       
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >      
              
              
              < 
              script 
              >   
              
              
              document.write("蚂蚁部落"); 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >   
              
              
              < 
              body 
              >   
              
              
              < 
              div 
              >www.softwhy.com</ 
              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.com/"  
              />       
              
              
              < 
              title 
              >蚂蚁部落</ 
              title 
              >      
              
              
              < 
              script 
              > 
              
              
              document.close();  
              
              
              document.write("蚂蚁部落"); 
              
              
              </ 
              script 
              >  
              
              
              </ 
              head 
              >   
              
              
              < 
              body 
              >   
              
              
              < 
              div 
              >www.softwhy.com</ 
              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.com/"  
              />        
              
              
              < 
              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方法输出的内容会覆盖掉第一个输出的内容。

Captain__李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.write用法与清空原来的内容原因

网址：此方法可以向文档写入HTML代码或者JavaScript代码。语法结构：[JavaScript] 纯文本查看复制代码运行代码1document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。浏览器支持:（1）.IE浏览器支持此属性。（2
复制链接

扫一扫