框架父子頁面iframe相互調用方法
如果你采用嵌入iframe機制不可避免的要用到各個iframe頁面之間方法和屬性的相互調用。這裏介紹的是兼容各個瀏覽器的iframe調用方式。
這裏設定有3個頁面一個父頁面main.html它嵌入了兩個iframe分別是childPage1.html和childPage2.html
main.html有一個函數叫parentFunc()。main.html代碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript"
function parentFunc(){
//代碼段
}
</script>
<body>
<IFRAME scrolling="no" frameBorder=0 id=frmchild1 name=frmchild1 height="400"
src="childPage1.html" width="100%" allowTransparency="true"></IFRAME>
<IFRAME scrolling="no" frameBorder=0 id=frmchild2 name=frmchild2 height="400"
src="childPage2.html" width="100%" allowTransparency="true"></IFRAME>
</body>
</html>
子頁childPage1.html中有函數childFunc1()。代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript"
function childFunc1(){
//代碼段
}
</script>
<body>
</body>
</html>
子頁childPage2.html中有函數childFunc2()。代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript"
function childFunc2(){
//代碼段
}
</script>
<body>
</body>
</html>
子頁調父頁方法
如果子頁childPage1.html要調用父頁main.html中的parentFunc()方法那麽應該在childPage1.html中寫如下代碼
parent.parentFunc()
或者用
top.parentFunc()
parent找上一級top找最上一級。因為childPage1.html屬於二級所以parent和top作用一樣。 如果 childPage1.html又嵌了一個 grandchildrenPage.html的iframe想要調用main.html中的parentFunc()方法 則應該
parent.parent.parentFunc()
或者用
top.parentFunc()
兩個子頁方法互調
如果childPage1.html要調用childPage2.html中的方法childFunc2()則應該在childPage1.html中寫如下代碼
parent.frmchild2.parentFunc()
或者用
top.frmchild2.parentFunc()
frmchild2是main.html中引入第二個iframe時的id。同理childPage2.html要調用childPage1.html中的方法childFunc1()則應該在childPage2.html中寫如下代碼
parent.frmchild1.parentFunc()
或者用
top.frmchild1.parentFunc()
子頁取得父頁的節點對象及屬性
在main.html中有一個按鈕
<input type="button" value="aaa" id="parentBtn"/>
子頁childPage1.html要取得該按鈕的value則應在childPage1.html中寫如下代碼
parent.document.getElementById("parentBtn").value;
或者用
top.document.getElementById("parentBtn").value;
兩個子頁互取節點
例如子頁childPage1.html中有一個按鈕如下
<input type="button" value="11" id="btn"/>
如果childPage2.html要調用childPage1.html中按鈕的value則應該在childPage2.html中寫如下代碼
parent.frmchild1.document.getElementById("btn").value;
或者用
top.frmchild1.document.getElementById("btn").value;
父頁調用子頁方法
如果main.html要調用子頁childPage1.html中的方法childFunc1()應在main.html中寫如下代碼
document.getElementById("frmchild1").contentWindow.childFunc1()
frmchild1是main.html中引入第一個iframe時的id。 註意可能網上流傳著其他的做法但大多不兼容。有的只能在IE生效有的只能在FireFox下生效。所以要以此為準。
父頁取得子頁節點對象及其屬性
例如子頁childPage1.html中有一個按鈕如下
<input type="button" value="11" id="btn"/>
main.html要取得或更改子頁childPage1.html的按鈕的value值那麽應該用如下代碼
document.getElementById("frmrightChild").contentWindow.document.getElementById(‘btn‘).value;
再例如要取得子頁childPage1.html的內容高度可以從body節點的scrollHeight獲得。
document.getElementById("frmrightChild").contentWindow.document.body.scrollHeight;
但要註意需要在iframe頁面onload後才能取到其節點。所以完整的做法是main.html在引入childPage1.html加上onload函數如下
<IFRAME scrolling="no" frameBorder=0 id=frmchild1 name=frmchild1 height="400"
src="childPage1.html" width="100%" allowTransparency="true"></IFRAME>
getChildHeight()函數如下
function getChildHeight(){
var frm=document.getElementById("frmchild1");
var childHeight;
childHeight=frm.contentWindow.document.body.scrollHeight+"px";
}
文章來源http://www.uileader.com/doc/quickui/main.html
框架父子頁面iframe相互調用方法