一、JSONP
利用<script>不受瀏覽器同源策略的限制特性，來跨域進(jìn)行引入資源璧眠，前提需要在自己項(xiàng)目中創(chuàng)建好接口足陨，協(xié)商好對方后端返回這個(gè)接口的調(diào)用并且給這個(gè)接口傳入?yún)?shù)嫂粟；
如下代碼：
位于http://a.com:9000/A.html的代碼：
HTML:
...
<div id="wrap">
<h1>我是A站</h1>
<button id="btn">點(diǎn)擊變顏色</button>
</div>
...
JS:
btn.addEventListener("click",fn);
function fn() {
var script = document.createElement("script"); //動(dòng)態(tài)的創(chuàng)建一個(gè)script；
script.src="http://b.com:8080/getcolor?type=setColor"; //設(shè)置請求的地址
document.body.appendChild(script);
}
function setColor(tinct){ //創(chuàng)建一個(gè)接口墨缘，當(dāng)請求返回這個(gè)接口的調(diào)用星虹；
var h1 = document.querySelector("h1");
h1.style.color = tinct;
}
效果圖如下：
這里有一個(gè)按鈕零抬，點(diǎn)擊之后標(biāo)題的顏色可以改變。
http://b.com:8080/getcolor?type=setColor是一個(gè)需要請求的地址宽涌，這個(gè)地址將會(huì)返回一個(gè)接口的調(diào)用并給這個(gè)接口傳入?yún)?shù)setColor（color）平夜，這時(shí)就需要后端來提供了。后端代碼如下：
位于http://b.com:8080/A.html的代碼（這里是nodejs的服務(wù)器）：
function random(a,b){
return a+Math.round(Math.random()*(b-a))
}
function getRandColor(){
var arr = ["#"];
for (var i = 0; i < 3; i++) {
arr.push(random(0,255).toString(16));
}
return arr.join("");
} //這兩個(gè)方法將會(huì)返回一個(gè)隨機(jī)的十六進(jìn)制顏色碼卸亮；
···
var color = getRandColor();
var type = pathObj.query.type; //讀取請求連接里面的接口的函數(shù)名忽妒；
res.end(type+"("+"'"+color+"'"+")");
//返回一個(gè)函數(shù)的調(diào)用，這時(shí)將返回setColor('#******')兼贸；
效果如下：
二段直、CORS
與JSONP相比，CORS支持所有類型的HTTP請求而jsonp只支持GET請求溶诞。JSONP的優(yōu)勢在于支持老式瀏覽器鸯檬，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。
同樣的需求這次使用CORS來進(jìn)行實(shí)現(xiàn)螺垢，這里需要我們使用Aajx來請求喧务。
前端代碼如下：
var btn = document.querySelector("#btn");
btn.addEventListener("click",ajax);
var lock = false;
function ajax(){
if (lock) {
return;
}
var xhr = new XMLHttpRequest();
xhr.open("get","http://b.com:8080/getcolor",true);
//這里請求的是B站的資源；
xhr.send();
lock = true;
xhr.onload = function(){
if ((xhr.status>=200&&xhr.status<300)||xhr.status===304) {
setColor(xhr.response);
lock = false;
}
}
}
function setColor(tinct){
var h1 = document.querySelector("h1");
h1.style.color = tinct;
}
CORS的重點(diǎn)是后端代碼如下:
var color = getRandColor();//這里調(diào)用的函數(shù)枉圃，返回了一個(gè)十六進(jìn)制的顏色碼
res.setHeader("Access-Control-Allow-Origin", "*")
//設(shè)置響應(yīng)頭信息Access-Control-Allow-Origin為“*”
res.end(color);
后端把Access-Control-Allow-Origin設(shè)置為“*”功茴，意味著這可以允許所有的來訪問的域名；
效果如下：
三孽亲、降域
一個(gè)網(wǎng)頁嵌套了一個(gè)iframe指向另一個(gè)源坎穿，可以顯示里面的內(nèi)容但是無法使用js去操作它，如果想要js去操作里面的內(nèi)容墨林，并且是主域名和端口號相同的情況下赁酝，我們可以使用降域的方法去實(shí)現(xiàn)。
A站代碼如下：
<h1>我是A站</h1>
<iframe src="http://b.me.com:9000/b.html" id="into" name="B"></iframe>
//iframe 指向http://b.me.com:9000/b.html
<button>點(diǎn)擊變顏色</button>
...
document.querySelector('button').addEventListener('click', function(){
var inner = window.frames["B"]
inner.document.querySelector('h1').style.color = "red";
inner.document.querySelector('p').innerText = "我被A站變成紅色的了";
})
document.domain = "me.com"; 將他們降域?yàn)閙e.com;
B站代碼如下：
<h1>我是B站</h1>
<p></p>
...
document.domain = "me.com";
...
效果如下：
A站域名為a.me.com旭等、B站域名為b.me.com酌呆、利用document的domain屬性，將兩個(gè)域名同時(shí)設(shè)置為“me.com”搔耕，讓他們實(shí)現(xiàn)降域并且能跨域操作隙袁。
效果如下：
四、postMessage
這個(gè)是html5的新特性弃榨。相對于降域通過這個(gè)方法可以實(shí)現(xiàn)不同域名菩收、端口下的跨域操作，同樣實(shí)現(xiàn)上面的操作鲸睛，postMessage方法代碼如下：
A站代碼：
document.querySelector('button').addEventListener('click', function(){
inner.postMessage("red","http://b.com:8080/b.html")
}) //將向"http://b.com:8080/b.html"跨域發(fā)送“red”娜饵；
B站代碼：
window.addEventListener("message",function (e) {
document.querySelector("h1").style.color = e.data;
})
這里A站域名為a.com:9000,B站域名為b.ocm:8080,他們的域名和端口和是不同的也同樣實(shí)現(xiàn)了跨域操作，利用postMessage（）方法官辈，這里它有兩個(gè)參數(shù)箱舞，第一個(gè)參數(shù)是所要發(fā)送的信息遍坟，第二個(gè)參數(shù)是需要發(fā)送的地址，在B站這里晴股，需要監(jiān)聽"message"時(shí)間愿伴，它所事件對象有三個(gè)重要的屬性：data代表了所傳過來的信息；origin發(fā)出請求的協(xié)議电湘、域名和端口號如http://a.com:9000隔节；source對發(fā)送消息的窗口對象的引用;
postMessage效果如下：
