用js互相呼叫iframe頁面內的js函數_HTML/Xhtml_網頁製作-html教學-PHP中文網

用js互相呼叫iframe頁面內的js函數_HTML/Xhtml_網頁製作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

發布： 2016-05-16 16:43:03

原創

1396 人瀏覽過

最近，天天搞論文開題報告，一時技癢，再次設計Web，一下子就碰到一個問題，以前設計WEB頁的時候都是在IE裡面跑的，從來沒有考慮過firefox 更別提chrome了，可是現在不同了，至少我認為不相容Firefox的WEB頁面是極其醜陋和山寨的，所以從有個這個觀念開始，我設計頁面就開始注意這個兼容性，而這次就碰到一個兼容性的問題，html裡面有一個浮動框架，，可以在頁面中內嵌入一個頁面，用來做框架頁面非常適合，如下圖， <a href="http://www.jb51.net/do/uploads/userup/0907/0Z95443K53.jpg" target="_blank"><img style="max-width:90%" alt="" src="http://files.jb51.net/do/uploads/userup/0907/0Z95443K53.jpg" style="max-width:90%" border="0"></a> 一個html頁面，分成左右兩塊，左邊為導覽欄，右邊為需要顯示的內容，代碼如下： 左欄的代碼為： <iframe frameborder="0" id="frmTitleLeft" name="framLeft" src="left.html" style="HEIGHT: 100%; width:180px;"> 連接到left.html 右欄也類似，就本人所做的頁面，預覽的效果如下： <a href="http://www.jb51.net/do/uploads/userup/0907/0Z9552W101.gif" target="_blank"><img style="max-width:90%" alt="" src="http://files.jb51.net/do/uploads/userup/0907/0Z9552W101.gif" style="max-width:90%" border="0"></a> 現在要達到什麼樣的效果才能起到比較實用的效果呢，點擊其中的任何鏈接，都可以在右欄顯示，那麼很顯然需要透過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沒試過，不過應該沒問題。