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();
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。