父子iframe的信息交互

原创 fenghuixia 随笔 系统管理系统 250阅读 2017-05-23 10:46:14 举报

一、父子iframe的demo

1. 父iframe
    <div class="parent">parent</div>
<div>
    <iframe src="childIframe.html" id="child" name="child" class="full-screen"></iframe>
</div>
<button type="button" id="getCon">contents获取子iframe文档内容</button>
<button type="button" id="iframes">iframes获取子iframe方法</button>

    function parentFun(){
    alert("parentFun");
}
2. 子iframe
    <div class="child">child</div>
<button type="button" id="parentFun">parentFun</button>

           function childFun(){
        alert("childFun");
    }

二、父iframe操作子iframe

window.frames[]
功能:frames[]是窗口中所有命名的框架组成的数组。这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架。
语法:window.frames

1.查找文档内容
    $("#getCon").click(function(){
    alert($("iframe").contents().find(".child").html());
});
2.调用子iframe方法
   $("#iframes").click(function(){
    window.frames["child"].childFun();//id和name要一样才可以调用,调用子方法
})

三、子iframe调用父iframe方法

          $("#parentFun").click(function(){
        parent.parentFun();
    })
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复