跨域-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");
    }