一齿穗,常用的jsonp跨域
1傲隶,在瀏覽器里面能拼得出來,但是正常代碼請求返回如下:故代碼不同源窃页,需要進行跨域請求
1跺株,jsonp 只能get請求
2复濒,document.domain +iframe 主域相同子域不同
3,windows.name +iframe 不同頁面不同域名都可以乒省,且name可以支持非常長的String值
4芝薇,cors 服務(wù)器端處理
5,location.hash +iframe 不分作儿,利用代理
6,HTML postMessage 支持度挺高的
跨域請求方式如下:
1洛二,jsonp請求
注意:jsonp是利用src不受同源策略影響來實現(xiàn)的,src只能get請求方式
不能解決不同域的兩個頁面之間的如何進行JavaScript調(diào)用的問題
使用ajax調(diào)用jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP實現(xiàn)跨域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實現(xiàn)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", // 返回的數(shù)據(jù)類型攻锰,設(shè)置為JSONP方式
jsonp : 'callback', //指定一個查詢參數(shù)名稱來覆蓋默認的 jsonp 回調(diào)參數(shù)名 callback
jsonpCallback: 'handleResponse', //設(shè)置回調(diào)函數(shù)名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('狀態(tài)為:' + status + ',狀態(tài)是:' + xhr.statusText);
console.log(response);
}
});
});
});
</script>
</html>
通過getJSON()來實現(xiàn)jsonp跨域
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
console.log(data);
});
2晾嘶,主域相同,子域不同娶吞,document.domain + iframe
注意:形式可以是一個頁面里面嵌套iframe(另一個頁面或者域之間的數(shù)據(jù)通信)
實現(xiàn)方式如下:可以把2個界面的document.domain設(shè)置成一樣的垒迂,但是只能設(shè)置成本身,后者更高一級的父域才行妒蛇。
在頁面(http://www.damonare.cn/a.html) 中設(shè)置document.domain:
<iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe>
<script type="text/javascript">
document.domain = 'damonare.cn';//設(shè)置成主域
function test(){
alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 對象
}
</script>
------------------------------------------------------------------
在頁面(http://damonare.cn/b.html) 中也設(shè)置document.domain:
<script type="text/javascript">
document.domain = 'damonare.cn';//在iframe載入這個頁面也設(shè)置document.domain机断,使之與主頁面的document.domain相同
</script>
3,通過location.hash + + iframe跨域
主域不同
4绣夺,通過HTML5的postMessage方法跨域
兩個頁面之間的通信
A頁面通過postMessage方法發(fā)送消息:
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = "http://www.google.com";
ifr.contentWindow.postMessage('hello world!', targetOrigin);
};
B頁面通過message事件監(jiān)聽并接受消息:
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跨域
瀏覽器和服務(wù)器之間的通信,思想就是使用自定義HTTP頭部讓瀏覽器和服務(wù)器進行通信
平時正常寫代碼
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
xhr.send();
</script>
服務(wù)器設(shè)置請求頭:Access-Control-Allow-Origin啟用CORS陶耍。
Access-Control-Allow-Origin:*//或者是通配符
兼容:IE10+
6奋蔚,使用windows.name + + iframe跨域
** windows都有一個name屬性,在頁面載入期間烈钞,都是共享應(yīng)name屬性**
比如:我們在任意一個頁面輸入
window.name = "My window's name";
setTimeout(function(){
window.location.;
},1000)
--------------------------
進入damonare.cn頁面后我們再檢測再檢測 window.name :
window.name; // My window's name