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