前端框架iframe相互呼叫方法

UIleader發表於2017-09-13
前端框架

如果你採用嵌入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"> <IFRAME scrolling="no" frameBorder=0 id=frmchild1 name=frmchild1 height="400" src="childPage1.html" width="100%" allowTransparency="true">

    <IFRAME scrolling="no" frameBorder=0 id=frmchild2 name=frmchild2 height="400"
    src="childPage2.html" width="100%" allowTransparency="true"></IFRAME>
</body>

子頁childPage1.html中有函式childFunc1()。程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 子頁childPage2.html中有函式childFunc2()。程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 子頁調父頁方法 如果子頁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中有一個按鈕：

子頁childPage1.html要取得該按鈕的value，則應在childPage1.html中寫如下程式碼：

parent.document.getElementById("parentBtn").value; 或者用

top.document.getElementById("parentBtn").value; 兩個子頁互取節點 例如子頁childPage1.html中有一個按鈕，如下：

如果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中有一個按鈕，如下：

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" onload="getChildHeight()" width="100%" allowTransparency="true"> 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

相關文章