contentWindow 和 contentDocument 以及 iframe 的关系

前言

说到 contentWindow 和 contentDocument 的关系,会不由想到 window 和 document 的关系。

Window 对象表示浏览器中打开的窗口。

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的window 对象。

每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
—— w3school

用法及关系

contentWindow:是用来获取子窗口的 window 对象的,它兼容各大浏览器,用法如下

document.getElementById("iframeId").contentWindow

这样简单的一句就得到了 iframe 包含页面的 window 对象;

contentDocument:是用来获取子窗口的 document 对象的,主流浏览器都支持和 ie8+ 支持,用法如下

document.getElementById("iframeId").contentDocument

这样简单的一句就得到了 iframe 包含页面的 document 对象;

以上两种方法是在父窗口中获取到子窗口,既然我们都能拿到子窗口 window 对象和 document 对象了,那么子窗口内其他的操作就 easy 了 !

如果要通过子窗口A访问到同级的子窗口 B ,那么我们可以在子窗口 A 中这么来做:

parent.getElementById("iframeId").contentWindow.document.getElmentById("frameId_B")  

或者

parent.getElementById("iframeId").contentDocument.getElmentById("frameId_B")

就得到 B 窗口了。

此外,我们知道在 iframe 的页面中如果使用 history.back(),那么会使其主窗口后退。而通常我们不希望这样,于是你可以在子窗口中采用

parent.document.getElementById('iframe id').contentWindow.history.back(); 

添加新评论