iframe 跨域 父頁面向子頁面傳值

今天碰到一個需求，是不同域的兩個頁面之間傳值

在網上找了一下，一般有兩個解決方案，一個是建立一個代理頁面，通過代理頁面傳值，

另一個方法是通過H5的postMessage方法傳值，今天用的是第二種。

首先，在父頁面A中建立一個iframe，其中src要寫好子頁面B的地址，然后在A頁面中寫如下方法：

        var iframe = document.getElementById("onemap");
        var msg = {loginName:'arcgis',loginPassword:'Esri1234'};
        var childDomain = "https://geoplat.training.com";
        
        iframe.contentWindow.postMessage(msg,childDomain);

記住，childDomain與A的iframe的src地址不一樣，childDomain是域，而src是域中的一個頁面

msg是傳輸的信息，可以是字符串，也可以是對象。

上面的方法一定要寫在一個函數中，並通過點擊事件調用，如果希望iframe開始為空，點擊后在設置src，

可以在設置src之后，通過setTimeout設置一定時間后在傳輸信息。

在子頁面B中，通過對window添加事件獲取傳輸過來的信息：

            window.addEventListener("message",function(obj){

               

                var name = obj.data.loginName;

                var password = obj.data.loginPassword;

                login.iframeChildLogin(name,password);

            },false);

這樣就完成了從不同域的父頁面向子頁面傳值的過程