2023年11月28日发(作者:)
8种超详细Web跨域解决⽅案
⼀、什么是跨域
当域名下的页⾯或脚本试图去请求域名下的资源时,就是典型的跨域⾏为。跨域的定义从受限范围可以分为两种,⼴义
跨域和狭义跨域。
(⼀)⼴义跨域
⼴义跨域通常包含以下三种⾏为:
1. 资源跳转:a链接、重定向。
2. 资源嵌⼊:、
// 监听传来的hash值
change = function () {
alert("B页⾯传递数据:" + ing(1));
};
// 向传递hash值
var iframe = mentById('iframe');
setTimeout(function() {
= + '#user=saramliu';
}, 1000);
// 监听传来的hash值
change = function () {
// 操作同域的hash值,传递数据
= ing(1);
};
+iframe代码⽰例:
var state = 0;
var iframe = mentById('iframe');
= function() {
if (state === 1) {
// 第2次onload成功后,读取同域中数据
alert();
} else if (state === 0) {
// 第1次onload成功后
state = 1;
}
};
postMessage是⼀种安全的跨域通信⽅法。当获得对的window对象后,调⽤postMessage⽅法分发⼀个
MessageEvent消息。通过监听message事件即可获取传递的数据,从⽽实现跨域通信。postMessage实现流程如下图所
⽰:
postMessage⽅法的语法如下:
ssage(message、targetOrigin、[transfer])
otherWindow
⽬标窗⼝的window对象,⽐如iframe的contentWindow属性、执⾏返回的window对象等。
message
将要发送给其他window的数据。
targetOrigin
指定哪些窗⼝能接收到消息事件,其值可以是字符串*(表⽰⽆限制)或者是“协议+主机+端⼝号”。
transfer(可选)
是⼀串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收⽅,⽽发送⼀⽅将不再保有所有权。
ntListener("message", function(e) {
alert("A页⾯发来消息:" + ());
var data = {meesage: "这⾥是B页⾯发的消息"};
var url = "/";
ssage(ify(data), url);
}, false);
postMessage⽅案优点:
发布评论