标签：原因 str app localhost 自动生成 引用 开发 play jquer
跨域问题
1.JSONP：动态插入script标签，通过script标签引入一个js文件，这个文件载入成功之后会执行我们在url参数中制定的函数，并且会把我们需要的json数据传入
代码实现
Jquery方法
$.getJSON("http://a.com/data.php?callback=?",function dosomething(jsondata){
//处理获得的jsondata数据
})
jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。
$.getJSON会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。
getJSON: function( url, data, callback ) {
return jQuery.get( url, data, callback, "json" );
}
2.window.name+iframe
Iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域，巧妙的绕过了浏览器的跨域访问限制，name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
代码实现：
var data = ‘‘;
var ifr = document.createElement(‘iframe‘);
ifr.src = "http://localhost:8081/data.html";
ifr.style.display = ‘none‘;
document.body.appendChild(ifr);
ifr.onload = function() {
ifr.onload = function() {
data = ifr.contentWindow.name;
console.log(‘收到数据:‘, data);
};
ifr.src = "http://localhost:8080/同目录没有用.html";
}
把data.html页面载入进来?
显然我们不能直接在跨域1.html页面中通过改变window.location来载入data.html页面，
因为我们想要即使跨域1.html页面不跳转也能得到data.html里的数据。
答案就是在跨域1.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后跨域1.html再去得到iframe获取到的数据。
充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为data.html就行了。然后跨域1.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟跨域1.html页面同一个域才行，不然根据前面讲的同源策略，跨域1.html是不能访问到iframe里的window.name属性的。这就是设置iframe的src=‘同目录没有用.html‘的原因。
3.H5中的postMessage跨文档信息传输Cross Document Messaging
代码实现：
A.Html
<iframe src="http://localhost:8081/b.html"></iframe>
window.onload = function() {
var targetOrigin = ‘http://localhost:8081‘;
window.frames[0].postMessage(‘要发了‘, targetOrigin);
//otherwindow.postMessage(message, targetOrigin)中，otherwindow是对接收信息页的window引用，可以是iframe的contentwindow.
Message是需要发送的信息string，targetOrigin是用于限制otherwindow，*表示不做限制
}
window.addEventListener(‘message‘, function(e) {
console.log(‘a收到消息‘, e.data);
});
B.Html
window.addEventListener(‘message‘, function(e) {
if(e.source != window.parent) {
return;
}
let data = e.data;
console.log(‘b.html 接收到的消息:‘, data);
parent.postMessage(‘我已经接收到消息了!‘, e.origin);
});
4.CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。
CORS 需要浏览器和服务器同时支持才可以生效，对于开发者来说，CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。服务器设置相应头中的 Access-Control-Allow-Origin，浏览器允许跨域请求，需要浏览器支持H5，该值要与请求头中 Origin一致才能生效，否则将跨域失败。
标签：原因 str app localhost 自动生成 引用 开发 play jquer
原文地址：http://www.cnblogs.com/yuqing-o605/p/7657096.html
