几种跨域方式演示
2017-07-01 本文已影响0人
LeeoZz
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日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心",
"没有中国选手和巨星的110米栏 我们还看吗？",
"中英上演奥运金牌大战",
"博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
"最“出柜”奥运？同性之爱闪耀里约",
"下跪拜谢与洪荒之力一样 都是真情流露"
]
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日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心",
"没有中国选手和巨星的110米栏 我们还看吗？",
"中英上演奥运金牌大战",
"博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
"最“出柜”奥运？同性之爱闪耀里约",
"下跪拜谢与洪荒之力一样 都是真情流露"
]
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
父页面
<!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>
子页面
<!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
