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>
