想在“當(dāng)前位置”獲取子頁(yè)面的title屬性，但是main頁(yè)面和子頁(yè)面在不同的端口上，直接獲取會(huì)出現(xiàn)：

“Blocked a frame with origin from accessing a cross-origin frame”跨域問(wèn)題

于是改用postMessage進(jìn)行跨域訪問(wèn)；

子頁(yè)面中：

mounted(){this.frameInfo();}, methods: {frameInfo(){var data = document.title;console.log(data)console.log(basepPath)parent.postMessage(data, '*');//data為傳遞內(nèi)容，*修改為具體域名或者ip}, }

父頁(yè)面中監(jiān)聽子頁(yè)面?zhèn)鬟f來(lái)的“message”事件，剛開始我把監(jiān)聽事件放在了，iframe的load事件中監(jiān)聽，每次需要點(diǎn)擊兩次以上才能獲取到

message的監(jiān)聽事件，于是搜索一通，　https://segmentfault.com/q/1010000006937415　

最后把監(jiān)聽事件放在<script>最底部去執(zhí)行，就能正常獲取了；

…… window.addEventListener('message', function(messageEvent) {var data = messageEvent.data;console.info('message from child:', data);vue.menuTitle = data;},false);/*]]>*/</script>

　　

參考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#Example

轉(zhuǎn)載于:https://www.cnblogs.com/SimonHu1993/p/10717117.html

總結(jié)

以上是生活随笔為你收集整理的vue中使用postMessage进行跨越传值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。