以前我自己也犯过这么个错误,就是在document.write之后,发现脚本报错误。当然后来是知道了,最近看到有网友在群里提出类似的问题。我在这里就总结下document.write的用法和注意事项。

先看下面一个小网页:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
    
< head >
        
< meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1"   />
        
< title > Untitled Document </ title >
    
</ head >
    
< script  type ="text/javascript" >
        
function  InitPage()
        {
            
var  obj  =  document.getElementById( " DIV_top " );
            
// document.write(document.getElementById("DIV_top").style.width);
             // document.write(document.getElementById("DIV_top").style.height);
            document.write(obj.style.width);
            document.write(obj.style.height);
            
        }
    
</ script >
    
< body  onload ="InitPage();" >
        
< div  id ="DIV_top"  style ="width:400px; height:200px;" >  This is a test ! </ div >
    
</ body >
</ html >

这个网页执行是没有问题的。

下面请将函数当前注释去掉,最后两行加上注释,如:

var obj = document.getElementById("DIV_top");
            document.write(document.getElementById(
"DIV_top").style.width);
            document.write(document.getElementById(
"DIV_top").style.height);
            
//document.write(obj.style.width);
            //document.write(obj.style.height);

   执行过程发生什么情况了? 首先结果是只输出了 400px ,如果你的调试工具够先进就看到了,明确提示document.write(document.getElementById("DIV_top").style.height); 中,document.getElementById("DIV_top"). 为null

根据上面的小测试,我想你对document.write的细节已经清楚了。

 现在总结下:
document.write 产生一个文档输出流,会将先前的内容一次覆盖。 但是内存并没有释放对象,只是页面已经没有其句柄。 这个和js垃圾回收机制有关。

也许你会问,为什么第一个例子中的第二句 document.write没有将第一句的产生的内容冲掉呢?

这个。。。就好比你以流方式打开一个文件,第一次写的时候是覆盖,将文件内容都清掉。而第二次写的时候,并不需要重新打开了。

试试下面这个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    
<head>
        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
<title>Untitled Document</title>
    
</head>
    
<script type="text/javascript">
        
function InitPage()
        {
            
var obj = document.getElementById("DIV_top");
            
var temp = "add";
            
            
var str = "<input type=\"button\" onclick=\"document.write(\'可以不停的增加\');\" name=\'Test\' value=\'Test\'/>";
            document.write(obj.style.width);
            document.write(obj.style.height);
            document.write(str);
        }

    
</script>
    
<body onload="InitPage();">
        
<div id="DIV_top" style="width:400px; height:200px;"> This is a test !</div>
        
    
</body>
</html>


呵呵,比看枯燥的文字有意思吧。程序就是要多动手练习,实践。特别是自己有想法的时候,用代码去证明。

posted on 2008-11-25 01:41 -274°C 阅读(5205) 评论(4)  编辑  收藏 所属分类: web前端


FeedBack:
# re: 说说javascript write函数
2009-03-15 14:50 | cht
程序就是要多动手练习,实践。特别是自己有想法的时候,用代码去证明。
说得好!支持!  回复  更多评论
  
# re: 说说javascript write函数
2010-09-23 08:40 | laptop
good, 正遇到这个问题,谢了 楼主  回复  更多评论
  
# re: 说说javascript write函数
2013-11-13 14:06 | gloria
解释的部分一般,但问题的现象阐述明白了  回复  更多评论
  
# re: 说说javascript write函数
2013-11-13 14:06 | gloria
up@cht
  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 870460
  • 排名 - 37

最新评论