前言
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，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/zhishi/a/167766479279557.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：jquery find(jquery find class).doc
本文 PDF 下载地址：jquery find(jquery find class).pdf
| 留言与评论（共有 0 条评论） |
