iframe父子页面交互

Posted 2021-03-16 zimengxiyu

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

父页面调用子页面

获取父页面的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>