關於Iframe父頁面與子頁面之間的相互調用
- 高洛峰原創
- 2016-12-06 09:46:291381瀏覽
iframe元素就是文檔中的文檔。
window物件: 瀏覽器會在其開啟一個HTML文件時建立一個對應的window物件。但是，如果一個文件定義了一個或多個框架(即：包含一個或多個frame或iframe標籤)，瀏覽器就會為原始文件建立一個window對象，再為每個iframe建立額外的window對象，這些額外的window物件是原始視窗的子視窗。
contentWindow: 是指指定的iframe或iframe所在的window物件
Demo1
父頁fu.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父页面</title>
</head>
<body>
<input type=button value="调用子页面中的函数childSay函数" onclick="callChild()">
<iframe id="myFrame" src="zi.html"></iframe>
<script type="text/javascript">
function parentSay() {
alert("我是父页面中的方法");
}
function callChild()
{
document.getElementById("myFrame").contentWindow.childSay();
}
</script>
</body>
</html>子頁zi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子页面</title>
</head>
<body>
<input type=button value="调用父页面中的parentSay()函数" onclick="callParent()">
<script type="text/javascript">
function childSay()
{
alert("我是子页面的say方法");
}
function callParent() {
parent.parentSay();
}
</script>
</body>
</html>頁iframe2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父页面与子页面之间的调用</title>
</head>
<body>
<iframe src="http://localhost/iframe/iframe3.html" id="iframe3"></iframe>
<iframe src="http://localhost/iframe/iframe2.html" id="iframe2"></iframe>
<div>我是父页面</div>
<script type="text/javascript">
var iframe2=document.getElementById('iframe2');
iframe2.onload=function(){//父页面调用子页面中的方法
iframe2.contentWindow.b();
};
function test2() {
console.log("我是父页面中的方法，在子页面中调用的");
return iframe2;
}
</script>
</body>
</html>子頁iframe3.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子页面</title>
</head>
<body>
<div id="test">aaa</div>
<div>子页面</div>
<script type="text/javascript">
//子页面iframe2.html调用父页面iframe1.html的函数:
parent.test2();
function b(){
console.log("我是子页面iframe2");
}
function c() {
console.log("iframe3页面调用iframe2页面");
}
</script>
</body>
</html>Demo2也實作了子頁與子頁之間相互呼叫。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn