利用JQuery操作iframe父页面/子页面元素和方法汇总

云烟 • 2小时前 • 编程

欢迎大家来到IT世界,在知识的湖畔探索吧!

前言

iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录，这个使用纯JS也可以实现。下面话不多说了，来一起看看详细的介绍吧。

第一、在iframe中查找父页面元素的方法：

$('#id', window.parent.document)

欢迎大家来到IT世界,在知识的湖畔探索吧!

第二、在父页面中获取iframe中的元素方法：

欢迎大家来到IT世界,在知识的湖畔探索吧!$(this).contents().find("#id")

第三、在iframe中调用父页面中定义的方法和变量：

parent.method parent.value

JQUERY、JS调用IFRAME父窗口与子窗口元素的方法

1.jquery 在iframe子页面获取父页面元素代码如下:

欢迎大家来到IT世界,在知识的湖畔探索吧!$("#id", parent.document)

2. jquery在父页面获取iframe子页面的元素代码如下:

$("#id",document.frames('iframename').document)

3.js 在iframe子页面获取父页面元素代码如下:

欢迎大家来到IT世界,在知识的湖畔探索吧!window.parent.document.getElementByIdx_x("id");

4.js 在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("id");

5.子类iframe内调用父类函数：

欢迎大家来到IT世界,在知识的湖畔探索吧!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

欢迎大家来到IT世界,在知识的湖畔探索吧!<body style="background:#f0f0f0">
    main.html
</body>

<script>
/*子级本页面事件*/
    function oMainFn(){
            alert("子页面main.html事件调用成功");
        }
/*调用父页面事件*/
$(document).click(function(){
　　alert("您点击的是子页面！[main]")
    parent.window.oIndexFn();       //调用父级页面事件
})
</script>

利用JQuery操作iframe父页面、子页面的元素和方法汇总

欢迎大家来到IT世界,在知识的湖畔探索吧!

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/93496.html