本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于跨域的解决方式总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
同源政策:协议、域名、端口均相同。
非同源限制:
cookie、localStorage、indexDB无法读取。
DOM无法获取。
AJAX请求无法发送。
解决方式:
一、JSONP
原理:通过动态添加一个<script>元素,向服务器请求JSON数据。服务器接收请求返回到指定具名回调函数。
eg:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function addScript(src) {
var script = document.createElement( 'script' );
script.setAttribute( "type" , "text/javscript" );
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScript( "https://segmentfault.com/data?callback=getData" );
}
function getData(data) {
console.log(data)
}
|
注意:
1、查询的Url中callback需要指定回调函数的名字。
2、<script>在浏览器作为代码运行,定义的getData函数会被立即调用。
3、返回的JSON参数作为javascript对象,不是字符串,不需要进行JSON转换。
4、jquery库的 $.getJSON()也可以实现。
1 2 3 | $.getJSON( "https://segmentfault.com/data?callback=?" , function (data) {
console.log(data)
})
|
缺陷:是GET方式获取,不支持 POST。
二、window.postMessage
window.postMessage 无论是否同源都允许跨窗口通信。 postMessage 参数一是传递内容,参数二是协议+域名+端口或者(*表示不限制域名)
1 2 3 4 5 6 7 8 9 10 | 页面一: "https://www.segmentfault.com/page1.html" //传递页面
<script>
window.onload = function () {
if (typeof window.postMessage === undefined) {
alert( "浏览器不支持postMessage!" );
} else {
window.open.postMessage({data: "Hello World" }, "https://www.example.com/page2.html" );
}
}
</script>
|
1 2 3 4 5 6 | 页面二: "https://www.example.com/page2.html" //接收页面
<script>
window.addEventListener( 'message' , function (e) {
console.log(e.data);
},false);
</script>
|
事件接收window.addEventListener('message', function(){});中的message事件对象event有三个属性:
1、event.source:发送消息的窗口
2、event.origin: 消息发向的网址
3、event.data: 消息内容
1 2 3 4 5 6 7 | <script>
window.addEventListener( 'message' , receiveMessage);
function receiveMessage(event) {
event.source.postMessage( 'Nice to see you!' , '*' );
}
</script>
|
1 2 3 4 5 6 7 8 9 10 11 12 | <script>
window.addEventListener( 'message' , receiveMessage);
function receiveMessage(event) {
if (event.origin !== 'http://www.segmentfault.com/page1.html' ) return ;
if (event.data === 'Hello World' ) {
event.source.postMessage( 'Hello' , event.origin);
} else {
console.log(event.data);
}
}
</script>
|
三、iframe
iframe载入页面和src里面的目标域是同一个域,是能够发起ajax请求(父子窗口)。 //前提是同源,不同源就不可以发起ajax请求。
不同窗口同源之间是可以获取window对象,但是不能获取window对象的属性和方法。 //不同源会报错
1、document.domain + iframe(同源可用 -- 跨子域)
document.domain属性:一级域名相同,二级域名不同可以实现window对象获取。
1 2 3 4 5 6 7 8 9 | 页面一: "https://segmentfault.com/page1.html"
<script>
window.onload = function () {
document.domain = "https://segmentfault.com/" ; //设置domain
window.getData = function () {
}
}
</script>
|
1 2 3 4 5 6 7 8 9 10 11 | 页面二: "https://segmentfault.com/page2.html"
<iframe id= "iframe" src= "https://segmentfault.com/page1.html" onload= "test()" ></iframe>
<script>
document.domain = "https://segmentfault.com/" //设置domain
function test() {
var win = document.getElementById( "iframe" ).contentWindow;
win.getData( "https://segmentfault.com/json_domain.php" , function () {})
}
</script>
|
缺陷:主域名得一致。
2、window.name + iframe(非同源可用)
window.name属性:在一个窗口的生命周期内,无论是否同源,同一个窗口的载入页面window.name属性是共享的,每个页面都可以操作。
1 2 3 4 | 页面一: "https://segmentfault.com/page1.html"
<script>
window.name = "this is data!"
</script>
|
1 2 3 4 5 6 7 8 9 10 | 页面二: "https://segmentfault.com/page2.html"
<iframe id= "iframe" src= "https://segmentfault.com/page1.html" onload= "test()" ></iframe>
<script>
function test() {
var winName = document.getElementById( "iframe" ).contentWindow.name;
winName.src = "https://segmentfault.com/data.html" ; //最后需要将iframe的src设置成当前域的一个页面地址
}
</script>
|
缺陷:兼容性不好
3、location.hash + iframe(非同源可用)
片段标识符:片段标识符是指url#号后面的部分。只是改变片段标识符页面不刷新。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 页面一: "https://www.segmentfault.com/page1.html"
<script>
function startRequest(){
var ifr = document.createElement( 'iframe' );
ifr.style.display = 'none' ;
ifr.src = 'https://www.example.com/page2.html#messgae' ;
document.body.appendChild(ifr);
}
function checkHash() {
var data = location.hash ? location.hash.substring(1) : '' ;
}
setInterval(checkHash, 2000);
</script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 页面二: "https://www.example.com/page2.html#messgae"
<script>
function callBack(){
try {
parent.location.hash = 'somedata' ;
} catch (e) {
var ifrproxy = document.createElement( 'iframe' );
ifrproxy.style.display = 'none' ;
ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata' ;
document.body.appendChild(ifrproxy);
}
}
</script>
|
1 2 3 4 5 | 页面三: "ttps:/www.segmentfault.com/page3html#somedata"
<script>
parent.parent.location.hash = self.location.hash.substring(1);
</script>
|
缺点:数据暴露在url,长度也有限制。
四、WebSocket
WebSocket:浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
设置WebSocket请求头信息,服务器支持就可以进行。
缺点:实现成本高。
五、CORS
cors是跨域资源分享。现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
缺点:服务器配置,占用主域带宽。
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!
以上就是JavaScript跨域的解决方式总结(代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript怎么累加
javascript怎么将对象转成字符串
js中eval函数有什么用
data-*与js的交互
npm机制深入理解
javascript采用什么方式继承
javascript中const和object.freeze()的差异
javascript 中向上取整、向下取整、四舍五入的操作
javascript中如何使用prompt方法
学javascript可以看什么书
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript跨域的解决方式总结(代码)