父页面获取子页面的 window 对象
/**
* 在父页面获取 iframe 的 window 对象
* chrome：iframeElement. contentWindow
* firefox：iframeElement.contentWindow
* ie6：iframeElement.contentWindow
*/
function getIframeWindow(iframeElement) {
return iframeElement.contentWindow;
// return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
}
父页面获取子页面的 document 对象
/**
* 在父页面获取 iframe 的 document
* chrome：iframeElement.contentDocument
* firefox：iframeElement.contentDocument
* ie：element.contentWindow.document
* 备注：ie 没有 iframeElement.contentDocument 属性。
*/
function getIframeDocument(element) {
console.dir(element);
return element.contentDocument || element.contentWindow.document;
};
iframe 何时装载完毕
/**
* 下面的代码能正常运行于所有的浏览器之上。
* 由于 iframe 元素包含于父级页面中，因此以上方法均不存在跨域问题。
* 实际上 IE 提供了 onload 事件，但必须使用 attachEvent 进行绑定。
*/
function iframeOnload() {
var iframe = document.createElement(“iframe”);
iframe.src = “simpleinner.htm”;
if (iframe.attachEvent) {
iframe.attachEvent(“onload”, function () {
alert(“Local iframe is now loaded.”);
});
} else {
iframe.onload = function () {
alert(“Local iframe is now loaded.”);
};
}
document.body.appendChild(iframe);
}
利用 onload 和 attachEvent，实现 iframe 高度自适应
/**
* 如果 iframe 的高度不足屏幕可视区域的高度，则 iframe 的高度 === 屏幕可视区域的高度
* 如果 iframe 的高度大于屏幕可视区域的高度，则 iframe 的高度 === iframe 自己的高度
*
*/
function setFrameHeight(iframe) {
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var offsetHeight = iframeDoc.childNodes[1].offsetHeight;
var clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
iframe.height = offsetHeight > (clientHeight-35) ? offsetHeight : (clientHeight-35);
}
function iframeOnload() {
var iframe = document.getElementById(“iframe”);
if (iframe.attachEvent) {
iframe.attachEvent(“onload”, function () {
setFrameHeight(this);
});
} else {
iframe.onload = function () {
setFrameHeight(this);
};
}
}
在子页面中获取父页面的 window 对象
/**
* 存在跨域问题
* 在子页面中获取父页面的 window 对象
* 父页面：window.parent
* 适用于所有浏览器
*/
console.log(window.parent);
在子页面中获取顶层页面
/**
* 存在跨域问题
* 在子页面中获取顶层页面
* 顶层页面：window.top
* 适用于所有浏览器
*/
console.log(window.top);
在子页面中获取 iframe 的 html
/**
* 存在跨域问题
* 在子页面中获取 iframe 的 html
* window.frameElement
*（类型：HTMLElement）
* 适用于所有浏览器
*/
console.log(window.frameElement);
BUG##Blocked a frame with origin “null” from accessing a cross-origin frame.
跨页面操作涉及域的概念（origin），错误的意思是：未捕获的安全错误：阻止了一个域为 null 的 frame 页面访问另一个域为 null 的页面。代码运行时在本地直接用浏览器打开的，地址栏是 file:/// 的页面，只需改为 localhost 访问就行。