JavaScript跨域的解决方式总结（代码）
同源政策：和谈、域名、端口均雷同。
非同源限制：
cookie、localStorage、indexDB没法读取。
DOM没法猎取。
AJAX恳求没法发送。
解决方式：
一、JSONP
道理：通过动态增加一个<script>元素，向效劳器恳求JSON数据。效劳器接收恳求返回到指定具名回调函数。
eg:
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()也可以实现。
$.getJSON("https://segmentfault.com/data?callback=?", function(data) {
console.log(data)
})缺陷：是GET方式猎取，不支撑 POST。
二、window.postMessage
window.postMessage 不管可否同源都同意跨窗口通讯。 postMessage 参数一是传递内容，参数二是和谈+域名+端口或者（*表示不限制域名）
页面一："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>页面二："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: 新闻内容
<script>
//援用父窗口发送信息给下一个窗口
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
event.source.postMessage('Nice to see you!', '*');
}
</script><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属性：1级域名雷同，二级域名不一样可以实现window对象猎取。
页面一："https://segmentfault.com/page1.html"
<script>
window.onload = function() {
document.domain = "https://segmentfault.com/"; //设定domain
window.getData = function() {
//ajax恳求
}
}
</script>页面二："https://segmentfault.com/page2.html"
<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe>
<script>
//动态创立iframe最好，猎取完数据烧毁。
//document.domain设定成本身或更高1级的父域，主域必需雷同。
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属性是同享的，每个页面都可以操纵。
页面一："https://segmentfault.com/page1.html"
<script>
window.name = "this is data!"
</script>页面二："https://segmentfault.com/page2.html"
<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe>
<script>
//动态创立iframe最好，猎取完数据烧毁。
//猎取window.name
function test() {
var winName = document.getElementById("iframe").contentWindow.name;
winName.src = "https://segmentfault.com/data.html"; //最后需要将iframe的src设定成当前域的一个页面地址
}
</script>缺陷：兼容性不好
3、location.hash + iframe（非同源可用）
片段标识符：片段标识符是指url#号后面的部分。只是改动片段标识符页面不刷新。
页面一："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>页面二："https://www.example.com/page2.html#messgae"
<script>
function callBack(){
try {
parent.location.hash = 'somedata';
} catch (e) {
// ie、chrome的平安机制没法修改parent.location.hash，
// 所以要利用一个中心的example域下的代理iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata'; // 留意该文件在"segmentfault.com"域下
document.body.appendChild(ifrproxy);
}
}
</script>页面三："ttps:/www.segmentfault.com/page3html#somedata"
<script>
//由于parent.parent和本身属于统一个域，所以可以改动其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
</script>缺陷：数据显露在url，长度也有限制。
四、WebSocket
WebSocket：阅读器通过 JavaScript 向效劳器发出创立 WebSocket 连接的恳求，连接创立今后，客户端和效劳器端就可以通过 TCP 连接直接交流数据。
设定WebSocket恳求头信息，效劳器支撑就可以停止。
Origin: http://example.com //按照域名可否在白名单内来推断可否可以通讯
缺陷：实现成本高。
五、CORS
cors是跨域资源分享。现CORS通讯的关键是效劳器。只要效劳器实现了CORS接口，就可以跨源通讯。
缺陷：效劳器配置，占用主域带宽。
本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注PHP中文网的JavaScript视频教程栏目！
以上就是JavaScript跨域的解决方式总结（代码）的具体内容，更多请关注百分百源码网其它相关文章！
