jquery获取iframe父元素（iframe调用父页面js方法）

前言

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父页面、子页面的元素和方法汇总

jquery获取iframe父元素（iframe调用父页面js方法）

相关推荐

什么是常用的数据分析工具（传统数据分析工具包括）

尺有所短,寸有所长作文（中学生作文尺有所短寸有所长）

vivos15系列用的什么芯片（vivo S15系列真实评测）

seo和sem的区别与联系（seo和sem哪个好）

公众号投稿怎么投（怎样给公众号投稿步骤方法）

7寸照片标准怎么制作（七寸证件照分辨率尺寸要求详解）

发表评论