iframe父子頁面-獲取元素、調用方法

dom結構

父頁面

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<!-- 引入頁面 --> 
<iframe src="iframe2.html" width="400" height="400"></iframe>

子頁面

<div id="btn"></div>

/*加上一點樣式*/
#btn {
	width: 100px;
	height: 100px;
	background-color: blue;
}

獲取元素

子頁面通過js 獲取父頁面box元素

window.parent.document.getElementById("box")

jquery獲取父頁面box元素方法

// 方法一
$(window.parent.document.getElementById("box"))

// 方法二
$("#box", parent.document)

父頁面獲取子頁面元素

// 在標簽上添加onload事件
<iframe id="ifra" onload="getIframe()"  name="myifra" src="iframe2.html" width="400" height="400"></iframe>

// 原生js獲取
function getIframe() {
	var ifra = document.getElementById("ifra");
	console.log(ifra.contentWindow.document.getElementById("btn"));
}

// jquery獲取

function getIframe() {
	console.log($('#ifra').contents().find("#btn")[0]);
}

// 通過window.onload事件
window.onload = function() {
	var ifra = document.getElementById("ifra");
	console.log(ifra.contentWindow.document.getElementById("btn"));
}

【注意】 一定要等iframe加載完再去獲取里面的元素

調用方法

子頁面調用父頁面方法

// 先通過window.parent獲取到父元素，在調用該對象上的方法

window.parent.sayHello();

// 或者jquery

$(window.parent)[0].sayHello();

父頁面調用子頁面方法

// 先獲取到子頁面的window對象，然后在調用
window.onload = function() {
	var ifra = document.getElementById("ifra");
	ifra.contentWindow.sayName();
}

腳本之家父子頁面調用