當麻許的超技八

今天要來筆記一下一個可能是月經題，我有一個  parent.html 裡面嵌入了一個  son.html 這兩個位處於不同的 domain ，以前的年代可以很簡單的在 parent.html 裡面呼叫 son.html 裡面寫的 javascript function ，但是現在總是會出現..

Uncaught DOMException: Blocked a frame with origin "https://domain.com" from accessing a cross-origin frame.

1. 先敘述一下，我是要用 parent.html 呼叫 son.html 分別為 FuncA , FuncB 的兩個不同的 function ，並且我是需要取得回應值的。

2. 整理一下觀念，基本上現在要寫這樣的行為 其實是透過  postMessage 來做到 ，但是這觀念跟以前有點不一樣，傳統你會想成 , parent.html 呼叫 son.html  的 FuncA ，之後得到答案，但是現在思考的點應該是 parent.html 透過 postMessage 呼叫 son.html 的 FuncA ，之後 son.html 執行之後要透過 postMessage 去呼叫 parent.html 並且告訴他結果.

3. 還有一點該注意的，我這案例其中我規劃透過 postMessage 傳遞的時候我制定一個物件，其中包含 SourceType , Content , Func  。 SourceType 這邊主要判斷是不是自己寫的 程式來呼叫，因為我 Chrome 有裝一些數字錢包的外掛，它們也都是透過 postMessage 來 呼叫 function ，這就導致一堆呼叫進來的東西。Content 就是我要傳遞的資料，Func 就是判斷 呼叫哪一個 function

Source Code parent.htm:

Source Code son.html:

大概就是這樣，紀錄一下，這裡面比較 tricky 的就是 domain 的部分要帶入 '*' 之前我乖乖地填寫 domain 結果我在 jsfiddle 上面測試都沒有過..

紀錄一下給需要的人..

jsfiddle 屍體 : https://jsfiddle.net/no2don/pfdtz7yk/31/

reference :

https://rockjins.js.org/2017/05/05/2017-05-05-iframe-cross-domain-Communication/

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage