Vue中，iframe中的子網頁，調用父網頁的方法2

　　這裏有我原來寫的文章：Vue中，iframe中的子網頁，調用父網頁的方法，這裏面寫了， 父子頁面的調用。但是今天寫的時候，遇到了下面的報錯；

• Uncaught DOMException: Blocked a frame with origin "http://192.168.1.190:5500" from accessing a cross-origin frame.

  阻止一個源爲“http://192.168.1.190:5500”的幀訪問一個跨源幀。

•     at btn.onclick

  在btn.onclick

大致的問題就是這樣的了。然後這個問題，就是被嵌套的子頁面和父頁面不是同源的，造成了不能使用上次的方法直接訪問。但是也是有解決辦法的；

　　在window中有一個全局的方法，就是爲了解決這個問題的。叫做postMessage，他的解釋在這裏。下面直接說一下他的用法。在父頁面，直接使用postMessage傳遞給子頁面，

1     window.onload = function () {
2         var iframeId = document.getElementById("iframeIdOther");
3         // console.log(iframeId.contentWindow)
4         var btn = document.getElementById("btn")
5         btn.onclick = function(){
6             // iframeId.contentWindow.emptyClick(); // 這種是隻有同源策略才能使用的
7             iframeId.contentWindow.postMessage("hahhahaha", '*'); // 第一個參數，可以是字符串對象等
8         }
9     }

然後在子頁面，接受這個轉遞值就可以了；

1     window.addEventListener ('message', function(event) { 
2       //event.data獲取傳過來的數據
3       console.log(event)
4       that.emptyClick();
5     });

我的子頁面是在Vue環境，所以需要寫在mounted函數中。然後我截個圖，就是傳遞過來的這個event打印的值；

 

　　最後還是需要說明一個問題，就是這裏的傳值，還是需要你有父頁面和子頁面的修改和操作的權限。如果沒有的話，是沒有辦法改的；