iframe和父級頁之間的通信


記錄一下產品界面中iframe的通信與操作問題:
一、iframe和父級之間(簡單)
iframe可以通過parent或top來找到父級頁面,父級頁面也可以很容易找到iframe。

二、iframe和iframe之間(復雜一些)
如果頁面中有兩個iframe:A和B,那么在A頁面中可以通過parent.B來找到B,反之亦然。

但是,這樣會有一個問題,如果parent.B名稱變了或者根本就沒有parent.B咋辦呢,難道去修改A要加載的N個頁面的JS?所以上面的方法並不靠譜,雖然能很快的解決問題,但有很大的隱患。

產品中使用了比這要靠譜很多的方法:
在主頁面中,設定一個變量C(當然C可以是普通的全局變量,也可以是某個自定義對象的屬性);
A加載頁面時,執行 parent.C = window ,將主頁面的C指向A;
這樣B中,就可以通過parent.C來訪問A。

這樣最大的好處就是不用依賴於iframe的name了,得到很大的解放。
同理,多層iframe嵌套,任意iframe之間都可以用該方法訪問,相當強大

 

舉例

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
</head>
<body>
<script type="text/javascript">
function abc(id){
alert(id);
}
</script>
<form id="form1" runat="server">
<div>
<iframe id="iframes" src="abc.htm" width="500" height="480" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
</div>
</form>
</body>
</html>

 

 

 

abc.htm

 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁</title>
</head>
<body>
<div>
<a href="javascript:void(0)" onclick="test();">asdfasdf</a>
</div>
<script type="text/javascript">
function test()
{
parent.abc('斯蒂芬森');
}
</script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM