码迷,mamicode.com
首页 > 其他好文 > 详细

iframe父子页面交互

时间:2020-01-11 22:32:04      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:main   console   加载   域名   窗口   sel   通过   parent   click   

以下的父页面与子页面交互的方法必须起一个页面服务才能使用(通过域名来访问)并且的保证父页面与子页面是在同一域名下,不然是会报错的

父页面调用子页面

获取父页面的ifram的id或calss之后可以通过contentWindow这个对象获取子页面的元素和方法.父页面调用子页面的元素和方法时,必须要等iframe加载完毕,或者在onload 方法里执行,不然是获取不到的!

contentWindow 可取得子窗口的 window 对象。
document.getElementById(‘main‘).contentWindow.document.querySelector(".warp");//获取父页面的方法
document.getElementById(‘main‘).contentWindow.childFn();//获取子页面的方法并执行

子页面调用父页面

在子页面通过window.parent.fn()可以获取并执行父页面的方法

window.parent.parentFn() 

实例:

父页面

<iframe scrolling="no" id="main" name="main" frameborder="0" src="iframe子页面1.html"></iframe>
        <script type="text/javascript">
            //根据ID获取iframe对象
            var ifr = document.getElementById(‘main‘);
            ifr.onload = function() {
                /*获取子页面的dom元素*/
                var warp=ifr.contentWindow.document.querySelector(".warp"); //获取子页面的元素
                console.log(warp);        
                ifr.contentWindow.childFn()    //调用子页面的方法    
            }
            
            function parentFn(){
                alert("我是父页面的方法")                
            }        
 </script> 

子页面

 <p onclick="parentFn">购物车</p>
    <script>
        var box=document.querySelector("p");
        box.onclick=function(){
            window.parent.parentFn()//点击时调用父页面的方法
        }       

        function childFn(){
            console.log("我是子页面的方法")
        }
    </script>

 

iframe父子页面交互

标签:main   console   加载   域名   窗口   sel   通过   parent   click   

原文地址:https://www.cnblogs.com/zimengxiyu/p/12181207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!