想在“當前位置”獲取子頁面的title屬性，但是main頁面和子頁面在不同的端口上，直接獲取會出現：

“Blocked a frame with origin from accessing a cross-origin frame”跨域問題

于是改用postMessage進行跨域訪問；

子頁面中：

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

父頁面中監聽子頁面傳遞來的“message”事件，剛開始我把監聽事件放在了，iframe的load事件中監聽，每次需要點擊兩次以上才能獲取到

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

最后把監聽事件放在<script>最底部去執行，就能正常獲取了；

…… 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

轉載于:https://www.cnblogs.com/SimonHu1993/p/10717117.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。