iframe 子页面与父页面间的互通

在我们开发过程中，会碰到许多页面嵌套的情况，免不了使用iframe来引入子页面，那么我们在子页面进行的一系列操作，如何影响控制父页面呢？

注意

因涉及跨域，需在服务器环境下打开页面；

JQ 方法

作为强大的js库，jq封装了强大的选择器，我们完全可以使用jq来进行操作

子页面操作父页面

/*子页面对父级页面进行操作*/
    $('.btnClick').on('click',function(){
        $(window.parent.document).find('.week table').toggle();
// console.info($(window.parent.document));
    });

父页面操作子页面

父页面查找子页面，直接在所在iframe上标注ID，查找相应的iframe ID，然后获取页面。

//页面
<iframe src="./iframe_list.html" frameborder="0" id='iframe_list'></iframe>

//js
$('.btnClick').on('click',function(){
    $('#iframe_list').contents().find('.week table').toggle();
});

原生JS

原生js父页面操作子页面

 window.onload = function(){
var _iframe =document.getElementById('iframeId').contentWindow;
var _div =_iframe.document.getElementById('objId');
        _div.style.backgroundColor = '#ccc';
    }

原生js子页面操作父页面元素

 window.onload = function(){
var _iframe = window.parent;
var _div =_iframe.document.getElementById('parDiv');
        _div.style.color = 'red';
    }