iframe 子父页面相互调用元素以及方法
父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function parentfunc(){
console.log("hello,i'm parent page");
}
function childCall(){
//调用子页面方法
window.iframe.childFunc();
var txt=$("#txtP").val();
//访问子页面元素
$("#iframe").contents().find("#txtC").val(txt);
}
</script>
</head>
<body>
<div>
<h4>parent page</h4>
<div>
<label>父页面参数：</label>
<input type="text" id="txtP" value="" />
</div>
<button type="button" id="btnOk" onclick="childCall();" >调用子页面方法</button>
</div>
<div>
<iframe id="iframe" name="iframe" src="child.html"></iframe>
</div>
</body>
</html>
子页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function parentCall(){
//调用父页面方法
parent.parentfunc();
var txt=$("#txtC").val();
//访问父页面元素
$(window.parent.document).find("#txtP").val(txt);
}
function childFunc(){
console.log("hello,i'm child page");
}
</script>
</head>
<body>
<div>
<h4> this is child page</h4>
<div>
<label>子页面参数：</label>
<input type="text" id="txtC" value="" />
</div>
<button onclick="parentCall();">调用父页面方法</button>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
