iframe父子页面-获取元素、调用方法

dom结构

父页面

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

子页面

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

/*加上一点样式*/
#btn {
	 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();
}

脚本之家父子页面调用