跨页面通信有四种方法：一、URL参数传递少量字符串数据；二、localStorage实现同源双向持久化共享；三、postMessage支持跨窗口安全异步通信；四、BroadcastChannel实现同源多页面广播通信。
如果您希望在两个独立的 HTML 页面之间实现数据传递与共享，则需要借助浏览器提供的跨页面通信机制。以下是实现此目标的多种方法：
一、通过 URL 参数传递数据
该方法适用于从一个页面向另一个页面单向传递少量字符串数据，利用浏览器地址栏的查询参数（query string）进行信息携带，接收方页面解析 URL 即可获取数据。
1、在源页面中构造带参数的目标链接，例如：window.location.href = “page2.html?name=张三&id=1001”。
2、在目标页面（page2.html）中使用 JavaScript 获取 URL 查询参数，例如：const urlParams = new URLSearchParams(window.location.search)。
立即学习“前端免费学习笔记（深入）”；
3、读取指定参数值，例如：const userName = urlParams.get(“name”)，此时 userName 的值为 “张三”。
4、将获取的数据用于页面渲染或后续逻辑处理，例如：document.getElementById(“display”).textContent = userName。
二、通过 localStorage 实现双向持久化共享
该方法利用浏览器本地存储空间，在两个页面均能访问同一 localStorage 域的前提下，通过监听 storage 事件实现实时数据同步，适合需多次读写且要求页面刷新后仍保留数据的场景。
1、在源页面中写入数据，例如：localStorage.setItem(“sharedData”, JSON.stringify({msg: “Hello from page1”, timestamp: Date.now()}))。
2、在目标页面中监听 storage 变更事件，例如：window.addEventListener(“storage”, (e) => { if (e.key === “sharedData”) { console.log(“收到新数据：”, JSON.parse(e.newValue)); } })。
3、目标页面也可主动读取当前值，例如：const data = JSON.parse(localStorage.getItem(“sharedData”))。
4、确保两个 HTML 文件运行于同源环境（相同协议、域名、端口），否则 localStorage 不可跨域访问。
三、通过 postMessage API 进行跨窗口通信
该方法支持不同页面（包括 iframe 或 window.open 打开的窗口）之间安全、异步地发送消息，适用于需要实时响应和双向交互的场景，且可指定目标源以增强安全性。
1、在源页面中获取目标窗口引用，例如：const targetWin = window.open(“page2.html”, “_blank”)。
2、调用 postMessage 发送数据，例如：targetWin.postMessage({type: “DATA_UPDATE”, payload: {value: 42}}, “http://localhost:8080”)。
3、在目标页面中监听 message 事件，例如：window.addEventListener(“message”, (e) => { if (e.origin !== “http://localhost:8080”) return; console.log(“接收到消息：”, e.data); })。
4、目标页面可调用 e.source.postMessage() 向源页面回传响应，完成双向通信闭环。
四、通过 BroadcastChannel API 实现同源页面广播通信
该方法允许同源下的多个浏览器上下文（如多个 tab、iframe、worker）通过命名通道发送广播消息，所有监听该通道的页面均可接收，适合一对多或任意页面间松耦合通信。
1、在两个页面中分别创建同名 BroadcastChannel 实例，例如：const channel = new BroadcastChannel(“dataSyncChannel”)。
2、在源页面中发送消息，例如：channel.postMessage({action: “UPDATE_USER”, user: {id: 5, name: “李四”}})。
3、在目标页面中监听 message 事件，例如：channel.addEventListener(“message”, (e) => { console.log(“广播消息：”, e.data); })。
4、页面关闭前应调用 channel.close() 释放资源，避免内存泄漏。
以上就是html如何对接html_实现两个HTML页面的数据对接【两个】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607120.html
微信扫一扫 
支付宝扫一扫 
