Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

document对象的open和close方法

  说起open和close方法,大家熟悉的一定是window对象上的,它们的功能是打开和关闭网页窗口或标签页。但是document上的open和close又是个啥,又有什么用呢?document和window在概念上都有本质的差别,这一对同名方法在它们上也有完全不同的功能。
  与window不同,document是个DOM对象,说白了就是个类型为“文档”的DOM节点。在HTML中它负责文档原始源的加载。还记得我们是如何监测文档加载完成的吗?所谓文档加载完成就是DOM原始源加载完成,现代浏览器中提供DOMContentLoaded事件来检测文档加载完成。这是浏览器给我们提供的接口,但是我们考虑一下浏览器是如何实现这个事件的呢?当然是检测服务器发送完数据连接断开的相关事件!也就是说文档的内容在加载过程中是一个数据流,而文档在加载内容的过程中数据流是活动的,是“open”状态的。只有服务器发送完数据关闭链接才会变成“close”状态。这时浏览器才可以判断文档是加载完毕的,然后给document对象派送一个DOMContentLoaded事件。这整个过程都是基于一个数据流的状态,而document上的open和close就是对它的数据流操作。
  还记得一个新手问题“document.write会清空页面”吗?为什么write方法会清空页面?那就是因为调用write方法的时候文档的数据流已经被关闭了,write方法只能重新调用open来重新打开数据流,这就导致了原数据的丢失,所以页面被清空了。这也是为什么在文档加载完成之前调用write可以正常工作的原因。在数据流被关闭之后即使不调用write而直接调用open也会清空原数据的。
  既然文档加载完成后就关闭数据流了,那close方法有什么用呢?close方法可以关闭我们自己调用write或open方法打开的数据流。如果数据流打开而不关闭就不会触发DOMContentLoaded,以至于不会触发所在window的onload事件。 <iframe></iframe><br/>
<input type="button" value="点我调用iframe内document的close方法" />
<script>
var iframe=document.querySelector("iframe");
var idoc=iframe.contentDocument;
idoc.write("<script>");
idoc.write("onload=function(){alert('onload');}");
idoc.write("<\/script>");
document.querySelector("input").onclick=function(){
  idoc.close();
};
</script>
  当然,浏览器为了兼容性会做一些调整,比如我们在window对象上绑定DOMContentLoaded也是有效的,或者调用document的open方法时传入和window对象的open方法一样的参数,也会被视为在window对象上调用。但这些只是为了兼容而实现的,我们在使用时应该避免这样的混乱逻辑。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^