iframe跨域解決方案

　　　　公司某個功能用的是iframe，由於跨域的原因，我們不能直接設置父級頁面iframe的高度，所以用了一個中間頁home來完成父級頁面iframe的高度設置，這種中間頁其實很多時候不好用，因為涉及到頁面跳轉和刷新，每次都得刷一下頁面，而消息發送成功頁的一個定位到頂部的功能，就是由於頁面刷了一次導致體驗不好，除了體驗，這種中間頁跳轉的做法也很蹩腳和繁瑣。

　　　　昨天網上Get了一下iframe的跨域解決方案 找到了一個方法！

　　　　postMessage，通過postMessage可以實現iframe的跨域通信。原理是子頁面向父頁面發送消息，父頁面接收消息。

　　　　話不多說直接干貨。

 

　　　　子頁面代碼：

top.postMessage('success', '在這里填寫父頁面URL');

　　　　父頁面代碼：

    //響應事件
    window.addEventListener('message', function (e) {
        var color = e.data;
        console.log(color);
        if (color == "success")
        {
            $("#MessageSend").height(600);
            $(window).scrollTop(0);
        }
    }, false);

　　　　如上，子頁面向父頁面發送了一條消息 “success”，父頁面獲取消息后判斷消息內容是不是想要的，進而做相應的操作。

 

　　　　上面的代碼還應該完善一下，父頁面接收消息請求的時候，應該驗證域名，總不能隨便一個頁面發來消息這邊就處理。