Iframe父頁面與子頁面之間的調用
專業詞語解釋如下：
Iframe：iframe元素是文檔中的文檔。
window對象: 瀏覽器會在其打開一個HTML文檔時創建一個對應的window對象。但是，如果一個文檔定義了一個或者多個框架(即：包含一個或者多個frame或者iframe標簽)，瀏覽器就會為原始文檔創建一個window對象，再為每個iframe創建額外的window對象，這些額外的window對象是原始窗口的子窗口。
contentWindow: 是指指定的iframe或者iframe所在的window對象。
如果想要學習 "iframe之間的通信問題及iframe高度自適應"，請看這邊文章：
父頁面與子頁面之間的調用。
現在我們可以慢慢做demo來分別講解下，假如有iframe父頁面為 iframe1.html, 父頁面上有2個子頁面 分別為iframe2.html 和 iframe3.html。
父頁面iframe1.html代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery1.7.js"></script>
</head>
<body>
<iframe src="http://localhost/iframe/iframe3.html" id = "iframe3"></iframe>
<iframe src="http://localhost/iframe/iframe2.html" id = "iframe2"></iframe>
<div class="iframe1">父頁面</div>
<script>
function test2() {
console.log(1);
}
</script>
</body>
</html>
子頁面iframe2.html代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery1.7.js"></script>
</head>
<body>
<div id="test">aaa</div>
<div class="iframe2">子頁面</div>
<script>
function b() {
console.log("我是子頁面");
}
function iframe3Page() {
console.log("iframe3頁面調用iframe2頁面");
}
</script>
</body>
</html>
1. 子頁面iframe2.html調用父頁面 iframe1.html的元素如下代碼：
console.log($('.iframe1',parent.document));
2. 子頁面iframe2.html調用父頁面iframe1.html的函數如下代碼：
parent.test2();
注意：父頁面iframe1.html頁面 中test2方法不能放在$(function(){}), 放在里面就調用不到。
3. 子頁面iframe2.html調用自身的iframe(假如父頁面有很多iframe，獲取自身iframe不通過id或者name屬性).
1. 首先我們可以在父頁面上寫一個函數 用來獲取頁面所有的iframe，之后進行遍歷，進行判斷當前的window對象是否相同。如下代碼：
function getFrame(f){ var frames = document.getElementsByTagName("iframe"); for(i=0;i<frames.length;i++){ if(frames[i].contentWindow == f){ return(frames[i]) } } }
2. 在子頁面iframe2.html中如下調用父頁面的方法 getFrame.
/* 獲取自身的iframe */
var aa = parent.getFrame(this);
console.log(aa);
$(aa).attr("flag",true);
給iframe2設置屬性 flag: true, 如下截圖：
4. 父頁面iframe1.html調用子頁面 iframe2.html的元素及函數
如下調用有誤的：
console.log(document.getElementById("iframe2").contentWindow.b());
因為iframe2.html 有可能未加載完成，所以要等iframe2加載完成后再進行調用，所以我們需要 iframe2.onload = function(){}; 這樣再進行調用。為了兼容IE，我們可以如下封裝一個方法：
function iframeIsLoad(iframe,callback){
if(iframe.attachEvent) {
iframe.attachEvent('onload',function(){
callback && callback();
});
}else {
iframe.onload = function(){
callback && callback();
}
}
}
調用方式如下：
// 父頁面調用子頁面iframe2的方法
var iframe2 = document.getElementById("iframe2");
iframeIsLoad(iframe2,function(){
iframe2.contentWindow.b(); // 打印出 我是子頁面
// 父頁面獲取子頁面iframe2的元素
var iframeDom = $(".iframe2",iframe2.contentWindow.document);
console.log(iframeDom);
});