萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 腳本Html教程 >> 用js互相調用iframe頁面內的js函數

用js互相調用iframe頁面內的js函數

最近,天天搞論文開題報告,一時技癢,再次設計Web,一下子就碰到一個問題,以前設計WEB頁的時候都是在IE裡 面跑的,從來沒有考慮過firefox 更別提chrome了,可是現在不同了,至少我認為不兼容Firefox的WEB頁面是極其丑陋和山寨的,所以從有個這個觀念開始,我設計頁面就開始注意 這個兼容性,而這次就碰到一個兼容性的問題,html裡面有一個浮動框架,<iframe >,可以在頁面中內嵌入一個頁面,用來做框架頁面非常適合,如下圖,
 
一個html頁面,分成左右兩塊,左邊為導航欄,右邊為需要顯示的內容,代碼如下:
左欄的代碼為:
<IFRAME frameBorder=0 id=frmTitleLeft name=framLeft src="left.html" style="HEIGHT: 100%; width:180px;">
連接到left.html
右欄也類似,就本人所做的頁面,預覽的效果如下:
 
現在要達到什麼樣的效果才能起到比較實用的效果呢,點擊其中的任何鏈接,都可以在右欄顯示,那麼很顯然需要通過js來實現,原始的不兼容的辦法我也不多說了,請大家記住以下實現步驟:
1,首先獲得右欄iframe對象
var frames=document.getElementById("frameid");//frameid即右欄iframe的id名
2,重置其src值
frames.src=pageurl;//pageurl即要顯示的目的頁面
這樣就實現了頁面的跳轉

但是還有一點,如果想調用其中的函數就不是這麼簡單了
比如右欄中有一個函數right(),我要在左欄的鏈接中調用right()函數,該如何實現呢

1,首先leftframe是內嵌在容器頁index.html中的,因此需要先返回到index這一級別,並取得rightframe對象
var frames=window.parent.window.document.getElementById("frameid");

2,要能執行其頁面中的函數,必須要獲得window對象,這裡有一個重要的對象contentWindow,獲得這個對象,即可執行其中的函數了,如
frames.contentWindow.right();

以上代碼兼容IE6,Firefox3,chrome2.0,均成功通過測試,IE7沒試過,不過應該沒問題。

copyright © 萬盛學電腦網 all rights reserved