JSONP
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="news"></ul>
<button id="load">加載</button>
<script>
var button = document.querySelector("#load")
button.addEventListener("click", function() {
var script = document.createElement("script");
script.src = "http://localhost:8080/getnews?callback=showNews";
document.head.appendChild(script);
document.head.removeChild(script);
})
function showNews(news) {
var html = "";
for(var i = 0; i<news.length; i++) {
html += "<li>" + news[i] + "</li>";
}
document.querySelector("#news").innerHTML = html;
}
</script>
</body>
</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);
}
var cb = req.query.callback;
if(cb){
res.send(cb + '('+ JSON.stringify(data) + ')');
}else{
res.send(data);
}
})
JSONP.gif
CORS
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="news"></ul>
<button id="load">加載</button>
<script>
var button = document.querySelector("#load");
button.addEventListener("click", function() {
var req = new XMLHttpRequest();
req.open("get","http://localhost:8080/getnews",true);
req.onreadystatechange = function() {
if(req.readyState === 4 && req.status === 200) {
var news = JSON.parse(req.responseText);
var html = "";
for(var i = 0; i<news.length; i++) {
html += "<li>" + news[i] + "</li>";
}
document.querySelector("#news").innerHTML = html;
}
}
req.send();
})
</script>
</body>
</html>
后端
router.use('/hi', (req, res)=>{
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.send('world');
})
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);
}
res.header('Access-Control-Allow-Origin', '*');
res.send(data);
})
CORS.gif
postmessage
父頁(yè)面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
text-align: center;
}
#input1 {
box-sizing: border-box;
width: 500px;
height: 200px;
border: 1px solid;
border-bottom: none;
margin: 0 auto;
text-align: center;
padding: 50px;
}
#frame-input {
display: block;
border: 1px solid;
margin: 0 auto;
width: 498px;
height: 200px;
}
</style>
</head>
<body>
<h1>postmessage</h1>
<div id="input1">
<input type="text">
</div>
<iframe src="http://localhost:8080/frame.html" frameborder="0" id="frame-input"></iframe>
<script>
var input = document.querySelector("#input1>input");
input.addEventListener("input",function() {
window.frames[0].postMessage(this.value,"*");
})
window.addEventListener("message",function(e) {
input.value = e.data;
})
</script>
</body>
</html>
子頁(yè)面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#input1 {
box-sizing: border-box;
margin: 0 auto;
text-align: center;
padding: 50px;
</style>
</head>
<body>
<div id="input1">
<input type="text">
</div>
<script>
var input = document.querySelector("#input1>input");
input.addEventListener("input",function() {
window.parent.postMessage(this.value,"*");
})
window.addEventListener("message",function(e) {
input.value = e.data;
})
</script>
</body>
</html>
postmessage.gif
