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