跨域-iframe

跨域

同源策略：爲保障用戶信息安全，防止惡意網站竊取數據的一種安全策略。

「同源」：協議相同、域名相同、端口號相同

「非同源」：

1.Cookie、LocalStorage和IndexedDB沒法讀取
 2.DOM沒法獲取
 3.AJAX請求無效（能夠發送，但瀏覽器拒絕響應）

Iframe

Iframe元素能夠在當前網頁之中，嵌入其餘網頁。每一個iframe元素造成本身的窗口，即有本身的window對象。iframe之中的腳本，能夠得到父窗口和子窗口。可是在同源的狀況下，父窗口和子窗口才能通訊；若是跨域，就沒法拿到對方的DOM。

domain屬性

若是兩個窗口一級域名相同，只是二級域名不一樣，能夠經過設置document.domain來使其通訊。

經過設置document.domain只能獲取DOM，而Cookie、LocalStorage和IndexedDB沒法獲取。

錨點值

又稱爲片斷標識符，指的是URL的#後面的部分。若是隻是改變片斷標識符，頁面不會從新刷新。

父窗口能夠把信息，寫入子窗口的錨點值

var src = originURL + "#" + data;
document.getElementById("myIframe").src = src;

子窗口經過監聽hashchange事件獲得通知

window.onhashchange = checkMessage;
    function checkMessage(){
        var message = window.location.hash;
        ...
    }

XDM

跨文本消息傳遞（cross-document messaging）,簡稱XDM，指來自不一樣域的頁面間傳遞消息。
postMessage(),參數1表示消息值，參數2表示接收方是來自哪一個域的字符串。

var iframeWindow = document.getElementById("rayframe").contentWindow,
    iframeWindow.postMessage("A secret","http://www.wrox.com");

接收XDM消息時，會觸發window對象的message事件。這個事件以異步形式觸發，所以從發送消息到接收消息可能通過一段時間的延遲。觸發message事件後，傳遞給onmessage事件對象包含一下三方面重要信息：

1.data:做爲postMessage()第一個參數傳入的字符串數據
2.origin:發送消息的文檔所在的域
3.source:發送消息的文檔的window對象的代理。這個代理對象的主要用於在發送上一條消息的窗口中調用postMessage()方法。

父窗口：
    <iframe src="http://www.xiaokeai.com"></iframe>
    window.onmessage = function(e){
        if(e.origin == "http://www.wrox.com"){
            //處理接收到的數據
            processMessage(e.data);
            //可選，向來源窗口發送回執
            e.source.postMessage("Received","http://p2p.wrox.com")
        }
    }

    子窗口：
    if(window.parent !== window.self){
        window.parent.postMessage("xiaohuochai","http://fatherxiaokeai.com");
    }