一、JSONP
利用<script>不受浏览器同源策略的限制特性，来跨域进行引入资源，前提需要在自己项目中创建好接口，协商好对方后端返回这个接口的调用并且给这个接口传入参数；
如下代码：
位于http://a.com:9000/A.html的代码：
HTML:
...
<div id="wrap">
<h1>我是A站</h1>
<button id="btn">点击变颜色</button>
</div>
...
JS:
btn.addEventListener("click",fn);
function fn() {
var script = document.createElement("script"); //动态的创建一个script；
script.src="http://b.com:8080/getcolor?type=setColor"; //设置请求的地址
document.body.appendChild(script);
}
function setColor(tinct){ //创建一个接口，当请求返回这个接口的调用；
var h1 = document.querySelector("h1");
h1.style.color = tinct;
}
效果图如下：
这里有一个按钮，点击之后标题的颜色可以改变。
http://b.com:8080/getcolor?type=setColor是一个需要请求的地址，这个地址将会返回一个接口的调用并给这个接口传入参数setColor（color），这时就需要后端来提供了。后端代码如下：
位于http://b.com:8080/A.html的代码（这里是nodejs的服务器）：
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("");
} //这两个方法将会返回一个随机的十六进制颜色码；
···
var color = getRandColor();
var type = pathObj.query.type; //读取请求连接里面的接口的函数名；
res.end(type+"("+"'"+color+"'"+")");
//返回一个函数的调用，这时将返回setColor('#******')；
效果如下：
二、CORS
与JSONP相比，CORS支持所有类型的HTTP请求而jsonp只支持GET请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
同样的需求这次使用CORS来进行实现，这里需要我们使用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的重点是后端代码如下:
var color = getRandColor();//这里调用的函数，返回了一个十六进制的颜色码
res.setHeader("Access-Control-Allow-Origin", "*")
//设置响应头信息Access-Control-Allow-Origin为“*”
res.end(color);
后端把Access-Control-Allow-Origin设置为“*”，意味着这可以允许所有的来访问的域名；
效果如下：
三、降域
一个网页嵌套了一个iframe指向另一个源，可以显示里面的内容但是无法使用js去操作它，如果想要js去操作里面的内容，并且是主域名和端口号相同的情况下，我们可以使用降域的方法去实现。
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>点击变颜色</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"; 将他们降域为me.com;
B站代码如下：
<h1>我是B站</h1>
<p></p>
...
document.domain = "me.com";
...
效果如下：
A站域名为a.me.com、B站域名为b.me.com、利用document的domain属性，将两个域名同时设置为“me.com”，让他们实现降域并且能跨域操作。
效果如下：
四、postMessage
这个是html5的新特性。相对于降域通过这个方法可以实现不同域名、端口下的跨域操作，同样实现上面的操作，postMessage方法代码如下：
A站代码：
document.querySelector('button').addEventListener('click', function(){
inner.postMessage("red","http://b.com:8080/b.html")
}) //将向"http://b.com:8080/b.html"跨域发送“red”；
B站代码：
window.addEventListener("message",function (e) {
document.querySelector("h1").style.color = e.data;
})
这里A站域名为a.com:9000,B站域名为b.ocm:8080,他们的域名和端口和是不同的也同样实现了跨域操作，利用postMessage（）方法，这里它有两个参数，第一个参数是所要发送的信息，第二个参数是需要发送的地址，在B站这里，需要监听"message"时间，它所事件对象有三个重要的属性：data代表了所传过来的信息；origin发出请求的协议、域名和端口号如http://a.com:9000；source对发送消息的窗口对象的引用;
postMessage效果如下：
网友评论