在 javascript 中打开新页面有两种方法：window.open() 和 target="_blank" 属性。window.open() 创建新窗口或选项卡，指定目标和特性。target="_blank" 使链接或表单在新窗口或选项卡中打开。交互方式包括：通过window对象（访问属性和方法）、messagechannel api（提供安全通信），以及dom属性（document.referrer和document.domain）。
JS 打开新页面并进行交互
打开新页面
使用 JavaScript 打开新页面有两种方法：
- window.open()：此方法创建一个新窗口或选项卡。
- target="_blank" 属性：在 HTML 中使用此属性将链接或表单在新的窗口或选项卡中打开。
window.open() 方法
语法：
window.open(url, [target], [features])登录后复制
- url：要打开的页面的 URL。
- target（可选）：指定新窗口或选项卡的目标名称。
- features（可选）：指定新窗口或选项卡的特性，例如宽度、高度、工具栏是否可见等。
target="_blank" 属性
语法：
<a href="url" target="_blank">Link Text</a>登录后复制
页面交互
一旦新页面打开，可以使用以下方法与之交互：
通过 Window 对象
可以通过 Window 对象访问新窗口或选项卡的属性和方法。例如：
- window.location：获取或设置页面的 URL。
- window.document：获取或设置页面的 DOM 文档。
- window.postMessage()：向新窗口或选项卡发送消息。
通过 MessageChannel API
MessageChannel API 允许在两个不同的窗口或选项卡之间进行安全、可靠的通信。它需要使用以下步骤：
- 使用 new MessageChannel() 创建一个消息信道。
- 使用 postMessage() 方法向信道的一端发送消息。
- 使用 onmessage 事件侦听器监听信道的另一端的消息。
通过 DOM 属性
一些 DOM 属性可以用于跨窗口或选项卡进行交互，例如：
- document.referrer：包含触发新页面打开的页面的 URL。
- document.domain：返回当前页面和新页面的顶级域名，如果它们相同，则允许跨窗口或选项卡访问。
以上就是js打开新页面如何交互的详细内容，更多请关注小编网其它相关文章！
