一，常用的jsonp跨域
1，在浏览器里面能拼得出来，但是正常代码请求返回如下：故代码不同源，需要进行跨域请求
Paste_Image.png
1，jsonp 只能get请求
2，document.domain +iframe 主域相同子域不同
3，windows.name +iframe 不同页面不同域名都可以，且name可以支持非常长的String值
4，cors 服务器端处理
5，location.hash +iframe 不分，利用代理
6,HTML postMessage 支持度挺高的
跨域请求方式如下：
1，jsonp请求
注意：jsonp是利用src不受同源策略影响来实现的，src只能get请求方式
不能解决不同域的两个页面之间的如何进行JavaScript调用的问题
使用ajax调用jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域2</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
使用jquery的$ajax()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statusText);
console.log(response);
}
});
});
});
</script>
</html>
通过getJSON()来实现jsonp跨域
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
console.log(data);
});
2，主域相同，子域不同，document.domain + iframe
注意：形式可以是一个页面里面嵌套iframe（另一个页面或者域之间的数据通信）
实现方式如下：可以把2个界面的document.domain设置成一样的，但是只能设置成本身，后者更高一级的父域才行。
在页面(http://www.damonare.cn/a.html) 中设置document.domain:
<iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe>
<script type="text/javascript">
document.domain = 'damonare.cn';//设置成主域
function test(){
alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
}
</script>
------------------------------------------------------------------
在页面(http://damonare.cn/b.html) 中也设置document.domain:
<script type="text/javascript">
document.domain = 'damonare.cn';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>
3，通过location.hash + + iframe跨域
主域不同
4，通过HTML5的postMessage方法跨域
两个页面之间的通信
A页面通过postMessage方法发送消息：
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = "http://www.google.com";
ifr.contentWindow.postMessage('hello world!', targetOrigin);
};
B页面通过message事件监听并接受消息:
var onmessage = function (event) {
var data = event.data;//消息
var origin = event.origin;//消息来源地址
var source = event.source;//源Window对象
if(origin=="http://www.baidu.com"){
console.log(data);//hello world!
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
5，使用 CORS跨域
浏览器和服务器之间的通信，思想就是使用自定义HTTP头部让浏览器和服务器进行通信
平时正常写代码
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
xhr.send();
</script>
服务器设置请求头：Access-Control-Allow-Origin启用CORS。
Access-Control-Allow-Origin:*//或者是通配符
兼容：IE10+
6，使用windows.name + + iframe跨域
** windows都有一个name属性，在页面载入期间，都是共享应name属性**
比如：我们在任意一个页面输入
window.name = "My window's name";
setTimeout(function(){
window.location.href = "http://damonare.cn/";
},1000)
--------------------------
进入damonare.cn页面后我们再检测再检测 window.name :
window.name; // My window's name
网友评论