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';    }