解決同一頁面中兩個iframe互相調(diào)用jquery,js函數(shù)的方法
這一個月又沒更新博客，唉，懶癌又犯了，今天解決了一個問題，關(guān)于兩個iframe互相調(diào)用jquery函數(shù)方法
a.html中有兩個iframe,如下：
<iframe width="100%" height="100%" name="left" scrolling="auto" frameborder="0" src="b.html" id="left"></iframe> <iframe width="100%" height="100%" name="main1" scrolling="auto" frameborder="0" src="c.html" id="main1" ></iframe>
b.html中有一個treeview,稱為左菜單iframe
c.html為b.html中treeview點擊后顯示的數(shù)據(jù),就稱為右頁面iframe。
既然兩個頁面之間都有關(guān)系，存在在a.html中，那這兩個頁面就能互相調(diào)用Js方法。
ps:如果兩個頁面之間沒有一點關(guān)系，那就讓他們產(chǎn)生關(guān)系方能互相調(diào)用，比如說兩個頁面都引用一個js文件，那就能互相調(diào)用了。
比如說
c.html中有一個button
<input type="button" id="btn" onclick="btnAlert(i)"/>
<input type="hidden" id="hidVal" name="hidVal" />
function btnAlert(index) {
$(window.parent.$("#left"))[0].contentWindow.GetIndex(index);//調(diào)用b.html中的方法
}
b.html中
function GetIndex(index) {
$(window.parent.$("#main1")).contents().find("#hidVal").val(index);//找到c.html中的hidVal給他賦值
}
最后總結(jié)下：
如果是c.html的iframe是在b.html中那么引用下面的方法
1，子iframe內(nèi)調(diào)用父類函數(shù)方法：
window.parent.func();
2，子Iframe中獲取父界面的元素：
$("#xx", window.parent.document);
這個xx就是父界面中要獲取的元素的ID。
3，jquery 調(diào)用子iframe頁面中js的方法：
iframefunction()是子頁面的方法
$(window.parent.document).contents().find("#iframename")[0].contentWindow.iframefunction();
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
- Jquery調(diào)用iframe父頁面中的元素及方法
- jQuery基于ID調(diào)用指定iframe頁面內(nèi)的方法
- jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用
- jQuery實現(xiàn)跨域iframe接口方法調(diào)用
- jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
- 解析Jquery取得iframe中元素的幾種方法
- JQueryiframe頁面操作父頁面中的元素與方法(實例講解)
- jquery 操作iframe的幾種方法總結(jié)
- js與jQuery 獲取父窗、子窗的iframe
- Jquery方式獲取iframe頁面中的 Dom元素
- jQuery實現(xiàn)frame之間互通的方法
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的鼠標滾輪控制圖片縮放功能,結(jié)合完整實例形式分析了jQuery基于鼠標滾輪mousewheel事件進行頁面元素屬性動態(tài)操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
使用jquery.form.js實現(xiàn)圖片上傳的方法
這篇文章主要介紹了使用jquery.form.js實現(xiàn)圖片上傳的方法,涉及jquery使用表單插件jquery.form.js進行圖片上傳的提交、類型驗證、執(zhí)行結(jié)果回調(diào)顯示等技巧,非常簡單實用,需要的朋友可以參考下2016-05-05
修復(fù) jQuery 中 isFunction 方法的 BUG2010-01-01
IE下支持文本框和密碼框placeholder效果的JQuery插件分享
這篇文章主要介紹了IE下支持文本框和密碼框placeholder效果的JQuery插件分享,本文給出插件源碼和使用示例,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了編寫自己的jQuery提示框（Tip）插件的方法,需要的朋友可以參考下2015-02-02
6款經(jīng)典實用的jQuery小插件及源碼(對話框/提示工具等等)
jQuery擁有豐富多彩的插件，這些插件可以幫助你簡化很多的開發(fā)過程,下面介紹的6款實用jQuery小插件及源碼，感興趣的朋友可以參考下，希望本文可以幫助到你2013-02-02
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法，學(xué)習(xí)jquery的朋友可以參考下2012-02-02
jQuery基于事件控制實現(xiàn)點擊顯示內(nèi)容下拉效果
這篇文章主要介紹了jQuery基于事件控制實現(xiàn)點擊顯示內(nèi)容下拉效果,涉及jQuery事件響應(yīng)及元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jQuery實現(xiàn)倒計時重新發(fā)送短信驗證碼功能示例
這篇文章主要介紹了jQuery實現(xiàn)倒計時重新發(fā)送短信驗證碼功能,結(jié)合實例形式分析了基于jQuery的倒計時操作功能實現(xiàn)方法,涉及jQuery表單提交、驗證、正則操作等技巧,需要的朋友可以參考下2017-01-01
jQuery操作attr、prop、val()/text()/html()、class屬性
這篇文章主要介紹了jQuery操作attr、prop、val()/text()/html()、class屬性 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05