前言
iframe在復合文檔中經常用到，利用jquery操作iframe可以大幅提高效率，本文主要給大家分享了關于簡單使用JQUERY來操作IFRAME的一些記錄，這個使用純JS也可以實現。下面話不多說了，來一起看看詳細的介紹吧。
第一、在iframe中查找父頁面元素的方法：
$('#id', window.parent.document)
第二、在父頁面中獲取iframe中的元素方法：
$(this).contents().find("#id")
第三、在iframe中調用父頁面中定義的方法和變量：
parent.method parent.value
JQUERY、JS調用IFRAME父窗口與子窗口元素的方法
1.jquery 在iframe子頁面獲取父頁面元素代碼如下:
$("#id", parent.document)
2. jquery在父頁面 獲取iframe子頁面的元素 代碼如下:
$("#id",document.frames('iframename').document)
3.js 在iframe子頁面獲取父頁面元素代碼如下:
window.parent.document.getElementByIdx_x("id");
4.js 在父頁面獲取iframe子頁面元素代碼如下:
window.frames["iframe_ID"].document.getElementByIdx_x("id");
5.子類iframe內調用父類函數：
window.parent.func();
jquery_iframe父子級頁面事件使用
1、index.html
<body topmargin='0' leftmargin='0' style="background:#ccc"> //這里的屬性只是為了全屏下邊無間隙 index.html <iframe src="main.html" id="indexMain" style="margin-bottom:-5px;position:relative;"></iframe> //這里的樣式的為了跳轉之后移動端input輸入完成之后下邊無間隙</body><script>/*父級本頁面事件*/ function oIndexFn(){ alert("父級頁面index.html事件調用成功"); }/*調用子頁面事件*/$(document).click(function(){ alert("您點擊的是父頁面[index]") $("#indexMain")[0].contentWindow.oMainFn(); //iframe的id})</script>
2、main.html
<body style="background:#f0f0f0"> main.html</body><script>/*子級本頁面事件*/ function oMainFn(){ alert("子頁面main.html事件調用成功"); }/*調用父頁面事件*/$(document).click(function(){ alert("您點擊的是子頁面！[main]") parent.window.oIndexFn(); //調用父級頁面事件})</script>
利用JQuery操作iframe父頁面、子頁面的元素和方法匯總
本文發布于:2023-02-28 20:14:00，感謝您對本站的認可！
本文鏈接：http://www.newhan.cn/zhishi/a/167766479279557.html
版權聲明：本站內容均來自互聯網，僅供演示用，請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系，我們將在24小時內刪除。
本文word下載地址：jquery find(jquery find class).doc
本文 PDF 下載地址：jquery find(jquery find class).pdf
| 留言與評論（共有 0 條評論） |
