同域下跨文档通信iframe和window.open
1、iframe標(biāo)簽可以嵌套另一個(gè)標(biāo)簽,并且可以通過(guò)js去訪問(wèn)被包含的頁(yè)面的window對(duì)象,從而操作該頁(yè)面下documentElement,如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <script>window.onload = function() {var oBtn = document.getElementById('btn');var oMyIframe = document.getElementById('myframe');oBtn.onclick = function() {//如果我們要操作一個(gè)iframe里面的dom元素,首先要獲取到iframe引入的頁(yè)面的window//oMyIframe.contentWindow -> 被iframe包含的頁(yè)面的window對(duì)象//alert(oMyIframe.contentWindow); oMyIframe.contentWindow.document.body.style.background = 'red';}} </script> </head><body><input type="button" value="點(diǎn)擊我,改變2.iframe.html的背景色" id="btn" /><iframe id="myframe" src="2.iframe.html"></iframe> </body> </html>通過(guò)contentWindow來(lái)找到被包含頁(yè)面的window對(duì)象,從而繼續(xù)其他操作。那么被包含頁(yè)面怎么找到他的父級(jí)頁(yè)面呢?
一個(gè)頁(yè)面可以通過(guò)iframe來(lái)嵌套另外一個(gè)頁(yè)面,被包含的頁(yè)面又可以繼續(xù)通過(guò)iframe標(biāo)簽也繼續(xù)嵌套其他頁(yè)面,這樣就是一種層級(jí)關(guān)系
我們知道window指的是當(dāng)前頁(yè)面窗口,那么parent指的是父級(jí)窗口,top指的是頂級(jí)窗口,三者可能會(huì)表示相同窗口。例如:
parent.document.body.style.background = 'green';
top.document.body.style.background = 'green';
?
2、window.open
通過(guò)window.open方法可以打開(kāi)一個(gè)新窗口,并且返回的是被打開(kāi)窗口的window對(duì)象。
例如:
newWindow = window.open('4.window.open.html', '_blank');相反,window.opener可以訪問(wèn)到通過(guò)window.open方法打開(kāi)當(dāng)前頁(yè)面的窗口window,例如:
window.opener.document.body.style.background = 'green';注意:iframe和window.open都只能解決同域下的跨文檔通信!如果跨域,那么只能訪問(wèn)到window對(duì)象,window對(duì)象下的屬性和方法豆?jié){禁止訪問(wèn)。
?
轉(zhuǎn)載于:https://www.cnblogs.com/toodeep/p/4768171.html
總結(jié)
以上是生活随笔為你收集整理的同域下跨文档通信iframe和window.open的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: (数据分析三板斧)第一斧Numpy-第二
- 下一篇: 操作系统之进程管理:6、调度算法(先来先