鍍金池/ 問(wèn)答/HTML/ iframe跨域問(wèn)題

iframe跨域問(wèn)題

利用postmessage跨域向子頁(yè)面?zhèn)鞲疙?yè)面的window對(duì)象

代碼：

1.父頁(yè)面

    window_parent = this.window;
    var ifr = document.getElementsByClassName('video_iframe');
    ifr.contentWindow.postMessage(window_parent,target);

2.iframe頁(yè)面

window.addEventListener('message',function(event){
   if(event.origin == 'https://xxx.com'){
         this.window = event.data;
    }
},false);

報(bào)錯(cuò)：

clipboard.png

postMessage這個(gè)api，MDN上說(shuō)的是可以傳對(duì)象的，卻報(bào)這樣的錯(cuò)

回答
編輯回答
負(fù)我心

序列化一個(gè)對(duì)象，你可以用JSON.stringfy(obj),但是這里有一個(gè)問(wèn)題，window對(duì)象結(jié)構(gòu)復(fù)雜，你將會(huì)面臨circular reference，所以，有個(gè)折中方案，就是你需要window的屬性，將這些屬性提取出來(lái)，拼裝成一個(gè)新對(duì)象即可。
參考代碼如下：

var data = JSON.stringify({
    'location': window.location
    // etc
});

stackoverflow

2017年5月9日 20:05
編輯回答
離夢(mèng)

文檔看的不仔細(xì)呀……postMessage傳送的這個(gè)message，是要能被The structured clone algorithm序列化的，你這直接把window懟進(jìn)去了可不得報(bào)錯(cuò)么……
（手機(jī)發(fā)不了圖，直接順著原文找The structured clone algorithm點(diǎn)進(jìn)去看看吧）

另外一個(gè)，有一個(gè)東西你得理解下，不管是BOM還是DOM，它們只是一套接口，面向被瀏覽器引擎渲染后的頁(yè)面結(jié)構(gòu)，就好像一扇門，裝在墻上就能進(jìn)屋，但拆下來(lái)運(yùn)走就進(jìn)不去這個(gè)屋了。

2017年4月21日 23:19
編輯回答
舊螢火

直接傳window對(duì)象不行 換成普通對(duì)象還是可以的

2017年8月19日 10:17
編輯回答
冷溫柔

第一，window對(duì)象是不能被覆蓋的

第二， 對(duì)象肯定傳不過(guò)去的，更何況window對(duì)象

2018年3月8日 06:47
編輯回答
落殤

謝邀
window對(duì)象不能傳遞的，況且還跨域，安全問(wèn)題很多啊
其實(shí)，你應(yīng)該理一下你切實(shí)的需求，找找有沒有其他的解決方案

2018年7月9日 06:00