window.top、window.parent、window.self
window.top: 頂層窗口,即最上層的窗口;
window.parent: 父窗口,如果一個窗口沒有父窗口,則它的parent屬性為自身的引用;
window.self: 當前窗口,即自身的引用;
// 判斷當前窗口是否為頂層窗口
if (window.top === window.self) { // 當前窗口為頂層窗口
}
// 判斷當前窗口是子窗口
if (window.parent !== window.self) { // 當前窗口是子窗口
}
window.frames
-
frames屬性是一個類似數組的對象;
因為frames實際上是window對象的別名,frames屬性又是可以遍歷的,所以它是一個類似數組的對象
window.frames.length === window.length
-
frames屬性實際上是window對象的別名;
window.frames === window
-
frames屬性的每一項是框架內的窗口,即框架內的window對象;
frames屬性的每一項并不是iframe的dom節點!!!
若需要獲取iframe的dom節點可以通過以下方法:
frames[0].frameElement
window.frameElement
- frameElement 返回當前窗口所嵌入的對象元素;
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>demo</title>
<script>
function isTopWindow() {
return (window.top === window.self);
}
function isChildWindow() {
return (window.parent !== window.self);
}
function getFrameDomNode1() {
return window.document.getElementById("iframe_id");
}
function getFrameDomNode2() {
var subframes = getWindowFrames();
return subframes[0].frameElement;
}
function getWindowFrames() {
return window.frames;
}
function getInnerDom1() {
var frameNode = getFrameDomNode1();
return frameNode.contentWindow.document;
}
function getInnerDom2() {
var frameNode = getFrameDomNode2();
return frameNode.contentWindow.document;
}
function getInnerDom3() {
var subframes = getWindowFrames();
return subframes[0].document;
}
window.onload = function () {
console.info("是否頂級窗口:" + isTopWindow());
console.info("是否子窗口:" + isChildWindow());
console.warn("關于frames屬性");
console.info("window.frames === window: " + (window.frames === window));
console.info("window.frames.length === window.length: " + (window.frames.length === window.length));
console.warn("關于iframe dom節點");
console.info("window.iframe_id === window.frames[0] === window.frames['iframe_id']: " + ((window.iframe_id === window.frames[0]) && (window.frames[0] === window.frames['iframe_id'])));
console.info("兩個獲取iframe dom 節點結果是否一致:" + (getFrameDomNode1() === getFrameDomNode2()));
console.info("三個個獲取內部 dom 結果是否一致:" + (getInnerDom1() === getInnerDom2()) && (getInnerDom2() === getInnerDom3()));
}
</script>
</head>
<body>
<iframe id="iframe_id" width="800" height="300"></iframe>
</body>
</html>