以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉自己一句话,多点去尝试,别人说的不一定是对,自己想的也不一定是对的。
下面是我做的几个测试,应该能说明关于document.write的用法了:
1.关于清空的问题:
(1)调用window.onload事件,清空原本文档内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
window.onload = function(){
document.write("你要足够优秀,才能够支持其自己的梦想。");
}
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
</html>
上面的代码的结果是:
这种情况下会将原本的文档内容清空,因为使用了window.onload事件,当页面才加载完才去执行事件处理函数,这个时候文档流已经关闭了,这个时候执行document.write()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展示,这个就覆盖原本的内容了。
(2)不调用window.onload事件,不清空文档原本内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
document.write("你要足够优秀,才能够支持其自己的梦想。");
document.write("<br/>");
document.write("越努力,越幸运。");
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
</html>
运行结果:
另一个代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
<script type="text/javascript">
document.write("你要足够优秀,才能够支持其自己的梦想。");
document.write("<br/>");
document.write("越努力,越幸运。");
</script>
</html>
运行结果:
上面的方法不会清空文档原本的内容,这是因为当前的文档流是浏览器所创建的,并且document.wirte()就在其中,在执行document.wirte()这个函数的时候文档流还没有被关闭,不用调用document.open()函数创建新的文档流,所以就不会被覆盖;就是说当文档里面的输入对象的文档流和document.wirte()函数的文档流是同一个的时候,document.wirte()函数就不会清空原本的文档内容,但是当浏览器创建的文档流关闭了之后document.wirte()函数要调用document.open()函数创建新的文档流的时候,原本文档中已经存在的写好的东西就会因此而清空。
(3)不调用window.onload事件,并且先执行window.close()强制关闭文档流的情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
document.close();
document.write("你要足够优秀,才能够支持其自己的梦想。");
document.write("<br/>");
document.write("越努力,越幸运。");
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
</html>
执行结果:
为什么使用window.close()函数关闭了文档流还是不会清空原本文档的内容呢?原因是文档流是浏览器创建的,无权手动关闭,document.close()函数只能关闭由document.write()函数创建的文档流。
如果我们用下面的方法,利用window.close()函数关闭window.write()函数创建的文档流,就会清空原本的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
function create(){
var newWindow = window.open("","新开的页面","_blank");
newWindow.document.write("你要足够优秀,才能够支持其自己的梦想。");
newWindow.document.close();
newWindow.document.write("越努力,越幸运。");
}
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
<input type="button" value="点击" onclick="create()">
</body>
</html>
输入结果:
这个时候newWindow.document.write()就会覆盖第二个newWindow.document.write()函数,这是因为第一个newWindow.document.write()已经被newWindow.document.close()关闭了文档流。