在 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:返回当前页面和新页面的顶级域名,如果它们相同,则允许跨窗口或选项卡访问。