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();