JSONP
// 前端程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中國(guó)沖擊4金 博爾特再戰(zhàn)</li>
<li>男雙力爭(zhēng)會(huì)師決賽 </li>
<li>女排將死磕巴西赤惊！</li>
</ul>
<button class="change">換一組</button>
</div>
<script>
$('.change').addEventListener('click', function(){
var script = document.createElement('script');
// 第1步：創(chuàng)建一個(gè) script 標(biāo)簽
script.src = 'http://127.0.0.1/getNews?callback=appendHtml';
// 第2步：將 script 的 src 屬性改為目標(biāo)域的地址 url，并在 url 中帶好參數(shù)妻熊，方便后端直接將返回?cái)?shù)據(jù)定義成要執(zhí)行的 js 函數(shù)的形式
document.head.appendChild(script);
// 第3步：將創(chuàng)建并修改好的 script 標(biāo)簽加到頁(yè)面 DOM 中
document.head.removeChild(script);
// 第4步：script 標(biāo)簽使用完畢灶轰，可以從文檔中移除
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
// 后端程序羡洁，使用 server-mock 啟動(dòng)
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國(guó)沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭(zhēng)會(huì)師決賽",
"女排將死磕巴西其垄！郎平安排男陪練模仿對(duì)方核心",
"沒(méi)有中國(guó)選手和巨星的110米欄 我們還看嗎苛蒲？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國(guó)奪回第二紐約時(shí)報(bào)：中國(guó)因?qū)κ址幎鴣G失的獎(jiǎng)牌最多",
"最“出柜”奧運(yùn)？同性之愛(ài)閃耀里約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
news.splice(index, 1);
}
var cb = req.query.callback;
if(cb){
res.send(cb + '('+ JSON.stringify(data) + ')');
}else{
res.send(data);
}
// 根據(jù) url 參數(shù)捉捅，返回?cái)?shù)據(jù)形式直接是 function() 的形式撤防，在頁(yè)面中直接就是要執(zhí)行的 JS 函數(shù)代碼
})
核心是
$('.change').addEventListener('click', function(){
var script = document.createElement('script');
// 第1步：創(chuàng)建一個(gè) script 標(biāo)簽
script.src = 'http://127.0.0.1/getNews?callback=appendHtml';
// 第2步：將 script 的 src 屬性改為目標(biāo)域的地址 url，并在 url 中帶好參數(shù)棒口，方便后端直接將返回?cái)?shù)據(jù)定義成要執(zhí)行的 js 函數(shù)的形式
document.head.appendChild(script);
// 第3步：將創(chuàng)建并修改好的 script 標(biāo)簽加到頁(yè)面 DOM 中
document.head.removeChild(script);
// 第4步：script 標(biāo)簽使用完畢寄月，可以從文檔中移除
})
var cb = req.query.callback;
if(cb){
res.send(cb + '('+ JSON.stringify(data) + ')');
}else{
res.send(data);
}
// 根據(jù) url 參數(shù)，返回?cái)?shù)據(jù)形式直接是 function() 的形式无牵，在頁(yè)面中直接就是要執(zhí)行的 JS 函數(shù)代碼
CORS
// 前端程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中國(guó)沖擊4金 博爾特再戰(zhàn)</li>
<li>男雙力爭(zhēng)會(huì)師決賽 </li>
<li>女排將死磕巴西漾肮！</li>
</ul>
<button class="change">換一組</button>
</div>
<script>
$('.change').addEventListener('click', function(){
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
appendHtml( JSON.parse(xhr.responseText) )
}
}
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
// 后端程序
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國(guó)沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭(zhēng)會(huì)師決賽",
"女排將死磕巴西！郎平安排男陪練模仿對(duì)方核心",
"沒(méi)有中國(guó)選手和巨星的110米欄 我們還看嗎茎毁？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國(guó)奪回第二紐約時(shí)報(bào)：中國(guó)因?qū)κ址幎鴣G失的獎(jiǎng)牌最多",
"最“出柜”奧運(yùn)克懊？同性之愛(ài)閃耀里約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
news.splice(index, 1);
}
// CORS 方法的關(guān)鍵在后端這里，后端這里對(duì)于允許跨域訪問(wèn)自身 JS 接口的地址專(zhuān)門(mén)設(shè)置了返回響應(yīng)的頭部七蜘，如下述這兩行所示
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
//res.header("Access-Control-Allow-Origin", "*");
// 第一行允許專(zhuān)門(mén)的地址跨域訪問(wèn)自身谭溉，第二行允許所有地址跨域訪問(wèn)自身
res.send(data);
})
核心是
// CORS 方法的關(guān)鍵在后端這里，后端這里對(duì)于允許跨域訪問(wèn)自身 JS 接口的地址專(zhuān)門(mén)設(shè)置了返回響應(yīng)的頭部橡卤，如下述這兩行所示
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
//res.header("Access-Control-Allow-Origin", "*");
// 第一行允許專(zhuān)門(mén)的地址跨域訪問(wèn)自身扮念，第二行允許所有地址跨域訪問(wèn)自身
降域
<html>
<style>
.ct{width: 910px;margin: auto;}
.main{
float: left;
width: 450px;
height: 300px;
border: 1px solid #ccc;
}
.main input{
margin: 20px;
width: 200px;
}
.iframe{
float: right;
}
iframe{
width: 450px;
height: 300px;
border: 1px dashed #ccc;
}
</style>
<div class="ct">
<h1>使用降域?qū)崿F(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
document.querySelector('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "jrg.com"
</script>
</html>
<html>
<style>
html,body{
margin: 0;
}
input{
margin: 20px;
width: 200px;
}
</style>
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
document.querySelector('#input').addEventListener('input', function() {
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com';
</script>
</html>
瀏覽器中不同域的框架也是不能通過(guò)js進(jìn)行交互的，但是不同框架之間可以獲取到window對(duì)象碧库，但卻無(wú)法獲取到相應(yīng)的屬性和方法柜与。
例如 a.baidu.com 域下的一個(gè) html 文檔里有一個(gè)在其他域下（b.baidu.com）的 iframe 框架，在a.baidu.com 中并不能訪問(wèn)到 b.baidu.com 里的數(shù)據(jù)嵌灰；
但可以獲取到 b.baidu.com 中的 window 對(duì)象弄匕，但是這時(shí) window 的屬性和方法并不可用，兩個(gè)文件中使用 document.domain('baidu.com')方法 把域名都降到baidu.com沽瞭；
這樣就可以在 a.baidu.com 中使用 iframe 里面的 window 的所有屬性和方法了迁匠，通過(guò)window.frames[0] 獲取到 iframe 框架，但是這時(shí)再通過(guò)window.frames[0].document.querySelector(element) 獲取到 iframe 里的 element 元素驹溃。
在b.baidu.com 中通過(guò)window.parent.document.querySelector(element) 獲取到html里的元素城丧。
