父页面获取子页面的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访问就行。