js打开新页面如何交互

在 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 允许在两个不同的窗口或选项卡之间进行安全、可靠的通信。它需要使用以下步骤：

1. 使用 new MessageChannel() 创建一个消息信道。
2. 使用 postMessage() 方法向信道的一端发送消息。
3. 使用 onmessage 事件侦听器监听信道的另一端的消息。

通过 DOM 属性

一些 DOM 属性可以用于跨窗口或选项卡进行交互，例如：

• document.referrer：包含触发新页面打开的页面的 URL。
• document.domain：返回当前页面和新页面的顶级域名，如果它们相同，则允许跨窗口或选项卡访问。