localStorage 如何跨域通信？
2020-04-19 本文已影响0人
CondorHero
cookie 跨域主要记住一个单词，如下：
科瑞但寿司
看看 localStorage 如何跨域通信？
因为要跨域所以我们需要两台服务器，就直接使用 NodeJs 来调试了其中一个服务器代码如下：
const http = require("http");
const { readFile } = require("fs");
const server = http.createServer(async (req,res) => {
console.log(req.url);
if(req.url === "/index"){
const result = await new Promise((resolve,reject)=>{
readFile("./index.html",(err,res)=>{
resolve(res.toString());
});
})
res.end(result);
}else{
res.end("err");
}
})
server.listen(3000,function(){
console.log("服务器成功启动！");
});
现在为了跨域在重新启动一个服务器，只需要端口号不同就行了。代码如下：
const http = require("http");
const { readFile } = require("fs");
const server = http.createServer(async (req,res) => {
console.log(req.url);
if(req.url === "/search"){
const result = await new Promise((resolve,reject)=>{
readFile("./search.html",(err,res)=>{
resolve(res.toString());
});
})
res.end(result);
}else{
res.end("err");
}
})
server.listen(8888,function(){
console.log("服务器成功启动！");
});
好了，我们已经启动两个服务器了，现在开始了解下 localStorage 跨域请求的步骤。
- 在 index 使用 iframe 页面嵌入 search 页面
- 使用 postMessage 来进行跨页面通信
- 在 search 页面添加 message 事件进行监听 postMessage 发送过来的信息
页面通信详细版：
两个文档如何通信？通过 postMessage 发送 onmessage 来接收。
postMessage和onmessage
现在看看 index.html 文件的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>index</h1>
<button onclick="GetState()">点击</button>
<br />
<!-- iframe嵌入网页 -->
<iframe src="http://127.0.0.1:8888/search" id="myFrame" width="600" height="400px"></iframe>
<script>
localStorage.setItem("pageName","index");
function GetState () {
var frame = document.getElementById ("myFrame");
// send the 'getstate' message to the frame window
// 要发送的消息
var message = "getstate";
// postMessage发送消息
if (frame.contentWindow.postMessage) {
frame.contentWindow.postMessage (message, "http://127.0.0.1:8888/search");
}else {
alert ("Your browser does not support the postMessage method!");
}
}
// 接受返回消息
Init();
function Init () {
if (window.addEventListener) { // all browsers except IE before version 9
window.addEventListener ("message", OnMessage, false);
}
else {
if (window.attachEvent) { // IE before version 9
window.attachEvent("onmessage", OnMessage);
}
}
};
function OnMessage (event) {
var message = event.data;
// 发送回来的消息
console.log(message);
};
</script>
</body>
</html>
search.index 文件的内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>search</title>
</head>
<body>
<h1>search</h1>
<script>
localStorage.setItem("pageName","search");
window.addEventListener('message',function(event) {
// 指定接受固定网页内容
if(event.origin !== 'http://127.0.0.1:3000')return;
console.log('message received: ' + event.data);
// 往原网页发送返回消息
event.source.postMessage('我是发送回去的内容',event.origin);
},false);
</script>
</body>
</html>
当点击按钮，控制台打印出：
message received: getstate
我是发送回去的内容
完，哈哈哈😄
2020年4月14日01点10分
