iframe的父子窗口之間的對象相互調(diào)用基本用法
更新時間：2013年09月03日 15:27:37 作者：
iframe在使用時可能會涉及到父子窗口之間傳值和方法的相互調(diào)用，研究了一下其實非常簡單，就那么幾個用法而已，在此與大家分享下，感興趣的朋友可以參考下
使用iframe的時候，可能會涉及到父子窗口之間傳值和方法的相互調(diào)用，之前一直有些迷糊，也沒有著意去弄清楚，這兩天要干活，沒法子了只好把這都弄明白了。其實非常簡單，就那么幾個用法，幾句代碼而已。
子窗口中調(diào)用父窗口的js方法：
parent.changeBtnTitle('tzgg');
一個父窗口中可能會有若干個功能行為類似的子窗口，子窗口中的組件要調(diào)用相同或者類似的對象或者方法，那么就把這樣的方法寫在父窗口中，通過傳遞參數(shù)來達到不同的效果。
父窗口獲得子窗口中的某個對象：
首先要獲得子窗口的iframe對象，比如：
var frameName = window.frames["frameId"]
然后要獲得該子窗口的document值，然后就可以調(diào)用子窗口中的對象了。在父窗口中使用時為避免反復(fù)書寫，不妨寫成一個方法：
getSubWindowObj = function(moduleName){
return window.frames["iframe"+moduleName].document.getElementById("moreorless"+moduleName);
}
這里只用了一個參數(shù)，只因為我的iframeId和子窗口的對象Id名字起的有規(guī)律，只需傳入一個參數(shù)拼接之后就可以餓了。
同樣，子頁面調(diào)用父頁面的元素，可以使用如下代碼：
parent.window.document.getElementById('parentMenu');
//簡寫
parent.document.getElementById('parentMenu');
子窗口中調(diào)用父窗口的js方法：
復(fù)制代碼 代碼如下:
parent.changeBtnTitle('tzgg');
一個父窗口中可能會有若干個功能行為類似的子窗口，子窗口中的組件要調(diào)用相同或者類似的對象或者方法，那么就把這樣的方法寫在父窗口中，通過傳遞參數(shù)來達到不同的效果。
父窗口獲得子窗口中的某個對象：
首先要獲得子窗口的iframe對象，比如：
復(fù)制代碼 代碼如下:
var frameName = window.frames["frameId"]
然后要獲得該子窗口的document值，然后就可以調(diào)用子窗口中的對象了。在父窗口中使用時為避免反復(fù)書寫，不妨寫成一個方法：
復(fù)制代碼 代碼如下:
getSubWindowObj = function(moduleName){
return window.frames["iframe"+moduleName].document.getElementById("moreorless"+moduleName);
}
這里只用了一個參數(shù)，只因為我的iframeId和子窗口的對象Id名字起的有規(guī)律，只需傳入一個參數(shù)拼接之后就可以餓了。
同樣，子頁面調(diào)用父頁面的元素，可以使用如下代碼：
復(fù)制代碼 代碼如下:
parent.window.document.getElementById('parentMenu');
//簡寫
parent.document.getElementById('parentMenu');
相關(guān)文章
感謝網(wǎng)友“l(fā)iufabin”提出的關(guān)于不支持FF的問題，第一個在FF下經(jīng)過測試時支持的，第二個中的高度自適應(yīng)不支持，我在網(wǎng)上找了一個JQUERY的插件2009-05-05
JavaScript程序設(shè)計高級算法之動態(tài)規(guī)劃實例分析
這篇文章主要介紹了JavaScript程序設(shè)計高級算法之動態(tài)規(guī)劃,結(jié)合實例形式分析了javascript動態(tài)規(guī)劃算法的原理、實現(xiàn)技巧與相關(guān)使用注意事項,需要的朋友可以參考下2017-11-11
使用uniapp打包微信小程序時主包和vendor.js過大解決(uniCloud的插件分包)
每個使用分包小程序必定含有一個主包,所謂的主包,即放置默認啟動頁面/TabBar頁面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時主包和vendor.js過大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了前端手寫功能進階的相關(guān)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)選擇題選擇效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
window.event快達到全瀏覽器支持了，以后使用就方便了
在Tangram群里討論到<a href="#" onclick="baidu.event.preventDefault(event);">的寫法時，以為標(biāo)準(zhǔn)瀏覽器只能用arguments[0]來獲取到event，結(jié)果nodiseal同學(xué)說已經(jīng)可以這么用了，于是做了以下測試2011-11-11
Web系統(tǒng)中，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，是LAMP項目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動產(chǎn)生的。 此處介紹PHP中常用的實現(xiàn)頁面自動跳轉(zhuǎn)的方法。2015-04-04
基于JavaScript實現(xiàn)下拉列表左右移動代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)下拉列表左右移動效果,代碼簡單易懂非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了javascript搜索框效果實現(xiàn)方法,可實現(xiàn)顯示默認提示文字的搜索框效果,非常簡單實用,需要的朋友可以參考下2015-05-05
我遇到的參數(shù)傳遞中 雙引號單引號嵌套問題2010-02-02