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

丁素兰优秀作者

原创内容来源：小居数码网时间：2024-08-11 18:52:01 阅读() 收藏：47 分享：40 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有632个文字，大小约为3KB，预计阅读时间2分钟。

前言

jquery获取iframe父元素

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父元素）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（556）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：iframe调用父页面js方法（jquery获取iframe父元素）：http://sjzlt.cn/shuma/154759.html

上一篇：如何更好地使用栅格系统（栅格系统怎么使用）

下一篇：JAVA-数组的常见操作及案例（java数组代码案例）