前端跨域解决方案（8）：window.name

1 window.name 核心

window.name 是浏览器窗口的一个属性，它有两个关键特性：

1. 跨域共享：无论窗口的 URL 如何变化，window.name 的值始终保持不变；

2. 容量大：可存储最大约 2MB 的数据（不同浏览器略有差异）。

这使得 window.name 成为跨域通信的一种特殊方式：通过 iframe 加载跨域页面，利用window.name 传递数据。window.name 跨域的核心流程如下：

1. 主页面创建指向目标域的 iframe

2. 目标域页面在加载时将数据序列化后存入 window.name

3. 主页面检测 iframe 加载完成后，将其 src 修改为同源 URL

4. 同源页面加载完成后，主页面即可安全读取 iframe 的 window.name 属性

5. 解析数据并清理资源

2 实战案例

2.1 服务端A （servera.js）

// 引入 Express 框架
const express = require('express');
// 创建一个 Express 应用
const app = express();
// 设置静态文件夹
app.use(express.static('public'));
// 定义监听端口
const port = 3000;
// 让应用监听在指定端口并在控制台输出信息
app.listen(port, () => {
    // 当服务器开始运行时，打印一条消息
    console.log(`Server is running on http://localhost:${port}`);
});

2.2 服务端B (serverb.js)

// 引入 Express 框架
const express = require('express');
// 创建一个 Express 应用
const app = express();
// 设置静态文件夹
app.use(express.static('public'));
// 定义监听端口
const port =4000;
// 让应用监听在指定端口并在控制台输出信息
app.listen(port, () => {
    // 当服务器开始运行时，打印一条消息
    console.log(`Server is running on http://localhost:${port}`);
});

2.3 主页面（a1.html）

2.4 跨域 iframe 页面（b.html）

2.5 同域中转页面（a2.html）

window.name 跨域方案兼容性佳，能支持所有主流浏览器，且相比 URL 参数可传递更多数据，纯前端实现无需服务器配置；不过其流程较为复杂，需借助 iframe 中转，数据传输为一次性且无法实时通信，安全性也较低，需确保 iframe 来源可信，适合用于报表页面数据加载、跨域文件预览等一次性、大数据量的跨域数据传递场景。

下一章将介绍 location.hash 方案 ，敬请期待！