iframe和父頁面相互傳值,并兼容跨域問題 · 前端

otherWindow.postMessage(message, targetOrigin, [transfer]); 方法用于安全地實現跨源通信。 | 參數 | 說明 | | :-- | :-- | | otherWindow | 其他窗口的一個引用，比如 iframe 的 contentWindow 屬性、執行 window.open 返回的窗口對象、或者是命名過或數值索引的 window.frames。 | | message | 將要發送到其他 window的數據。 | | targetOrigin | 指定哪些窗口能接收到消息事件，其值可以是\*（表示無限制）或者一個 URI。 | | transfer | 可選，是一串和 message 同時傳遞的 Transferable 對象。這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。 | ## 父頁面向子iframe傳值 (在父頁面的js里獲取到iframe,然后向iframe傳值,然后這么寫就行了,第一個參數是需要傳的數據,也可以是對象) ``` var frame = document.getElementsByClassName('interfaceEditor')[0]; frame.contentWindow. postMessage ("數據", '*'); ``` (在子iframe的js里監聽獲取父頁面傳的值) ``` window. addEventListener ('message', function(event) { //event.data獲取傳過來的數據 console.log(event.data) }); ``` ## 子iframe向父頁面傳值 (在子iframe里面這么寫.? ?data是數據,? 第二參數是你父頁面的地址) ``` window.parent.postMessage(data,'http://localhost/'); ``` (在父頁面這么寫,e.data就是子頁面傳的數據.) ``` window.addEventListener('message',function(e){ var Date=e.data; console.log(Date) },false); ``` 第二種方式子頁面 ``` <body> 子級：B頁面<br/> <button id="b_button">B頁面發送A頁面數據</button><br/> <script> document.getElementById("b_button").onclick = function(){ var param = {'name':'admin'}; window.parent.postMessage(param,'*'); } </script> </body> ``` 父頁面 ``` <body> 父級：A頁面<br/><br/> <iframe src="http://www.genetek.cc/iframe/b.html" width="500px" height="200px" id="iframe"></iframe> <script> window.addEventListener('message', function(e) { alert(JSON.stringify(e.data)); console.log('獲取子級B頁面返回值:'); console.log(e.data); }) </script> </body> ```