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

前言

常用于复合文档中，使用操作可以大大提高效率。 本文主要分享一些简单操作的记录，使用纯JS也可以实现。 下面话不多说，我们来看看详细的介绍。

一、查找父页面元素的方法：

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

二、获取父页面中的方法：

$(this).contents().find("#id")

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

parent.method parent.value

、JS调用父窗口和子窗口元素的方法

1.在子页面获取父页面元素代码如下：

$("#id", parent.document)

2、在父页面获取子页面的元素代码如下：

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

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

window.parent.document.getElementByIdx_x("id");

4.js 获取父页面子页面元素代码如下：

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

5、子类中调用父类函数：

window.parent.func();

亲子页面事件使用

1.index.html

'0' leftmargin='0' style="background:#ccc">　　　　//这里的属性只是为了全屏下边无间隙
　　index.html
    rame src="main.html" id="indexMain" style="margin-bottom:-5px;position:relative;">rame>　　　　//这里的样式的为了跳转之后移动端input输入完成之后下边无间隙

cript>

    function oIndexFn(){
            alert("父级页面index.html事件调用成功");
        }

$(document).click(function(){
　　alert("您点击的是父页面[index]")
    $("#indexMain")[0].contentWindow.oMainFn();    //iframe的id
})
cript>

2.main.html

    main.html

cript>

    function oMainFn(){
            alert("子页面main.html事件调用成功");
        }

$(document).click(function(){
　　alert("您点击的是子页面！[main]")
    parent.window.oIndexFn();       //调用父级页面事件
})
cript>  

总结操作父页面和子页面的要素和方法