一、同域 下的
父窗口
<iframe id="myFrame" src="子.html"></iframe>
<script>
/*在 父页面 下我们可以通过JS去访问'被包含页面'的DOM元素*/
var myIframe = document.getElementById('myFrame');
Btn.onclick = function () {
//如果我们要操作一个iframe里面的dom元素,首先要获取到iframe引入的页面的window
//myIframe .contentWindow - >被iframe包含的页面的window对象
console.log(myIframe.contentWindow) ;
myIframe.contentWindow.document.body.style.XXXXXXX-- > ( 这里操作的就已经是子.html窗口了) ;
}
</script>
子窗口
<script>
/** * --- window : 当前窗口 --- parent : 父级窗口 --- top : 顶级窗口 * Btn.onclick = function () { parent.document.body.style.XXXXXXX-- > ( 这里操作的就已经是 父.html窗口了) ; } </script>/*在 子页面 下我们可以通过JS去访问'父页面'的DOM元素*/
二、跨域 下的
<iframe id="myFrame" src="子.html"></iframe>
<script> <!--父页面--> /*在父页面下我们可以通过JS去访问被包含页面的DOM元素*/ var myIframe = document.getElementById('myFrame'); Btn.onclick = function () { /** * post Message 对象 * 接收消息的窗口的window对象.postMessage(); * 参数1:---->发送的数据 参数2:---->接收数据的域名{带上协议} * 交互方式 ********************************************************** * -- iframe : 父页面 : contentWindow 子页面 : window.top * --- window : 当前窗口 --- window : 当前窗口 * --- parent : 父级窗口 --- parent : 父级窗口 * --- top : 顶级窗口 --- top : 顶级窗口 * * -- 窗口页 : 父页面 : window.open 子页面 : window.opener * 接收事件 * -- message * -- ev.origin : 发送数据来源的域 * -- ev.data : 发送的数据 */ /** * postMessage : 可以通过这个方法给另外一个(子)窗口发送信息 * 接收消息的(子)窗口的 window对象.postMessage(); */ // 参数1:---->发送的数据 参数2:---->接收数据的域名{带上协议} myIframe.contentWindow.postMessage("123","http://www.b.com"); } </script>
<script> <!--子页面--> window.addEventListener("message",function (ev) { //console.log("b.com 下的页面接收到内容了"); /** * message 事件的事件对象下保存了发送过来的内容 ev.data * ev.origin : 发送数据来源的域 ev.origin */ console.log(ev.data); //父 页面发送过来的内容 console.log(ev.origin); //发送数据来源的域 http:// ------ if(ev.data == "123"){ document.getElementById("id").style.color = "red"; } },false) </script>