说说javascript write函数

java-he

浏览: 174287 次
性别:
来自: 北京

最近访客更多访客>>

rubskin

lx_emperor

sky54521

MichealT

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

[网站分类]4.其他技术区

JavaScript HTML 脚本

以前我自己也犯过这么个错误，就是在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>

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

分享到：

JsDoc 介绍 | CSS总结

2008-11-25 01:41
浏览 800
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论