window.name 跨域方案
准备
通过koa-static
搭建页面服务
-
安装
koa
、koa-static
依赖yarn add koa koa-static -S
-
编写
koa
页面服务3000 服务const Koa = require("koa");
const Path = require("path");
const Static = require("koa-static");
const app = new Koa();
app.use(Static(Path.resolve(__dirname,'./')));
app.listen(3000,function(){
console.log("a 页面服务启动成功!");
});4000 服务const Koa = require("koa");
const Path = require("path");
const Static = require("koa-static");
const app = new Koa();
app.use(Static(Path.resolve(__dirname,'./')));
app.listen(4000,function(){
console.log("c 页面服务启动成功!");
});
语法
a 页面
a页面和b页面 在localhost:3000
环境下。a页面加载了c页面,如果a 页面访问c 页面数据会发生跨域,所以需要通过b 页面来充当中间人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a 页面</title>
</head>
<body>
<iframe src="http://localhost:4000/c.html" id="iframe"></iframe>
<script>
let first = true;
const iframe = document.getElementById("iframe");
iframe.addEventListener("load", function () {
if (first) {
iframe.src = "http://localhost:3000/b.html";
first = false;
} else {
console.log(iframe.contentWindow.name);
}
});
</script>
</body>
</html>
c 页面
c 页面 在localhost:4000
服务环境下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>C 页面</title>
</head>
<body>
<script>
window.name = JSON.stringify({
id:"c",
title:"C 页面"
});
</script>
</body>
</html>