js打开新页面如何交互
2020-10-25 05:56:46
在 JavaScript 中打开新页面并进行交互，主要通过以下两种方法实现，并辅以特定的交互机制：
一、打开新页面的方法window.open()
语法：window.open(url, target, features)
url：要打开的页面地址。
target（可选）：指定窗口名称（如 _blank），若同名窗口已存在则复用。
features（可选）：定义窗口特性（如 width=500,height=300）。
示例：const newWindow = window.open('
https://example.com', '_blank', 'width=600,height=400');target="_blank" 属性
适用于 <a> 标签或 <form>，直接在新标签页打开链接。
示例：<a href="
https://example.com"target="_blank">Open Example</a>
- 访问属性和方法：通过 window.open() 返回的引用（如 newWindow）操作新窗口：newWindow.location.href = 'https://new-url.com';// 修改URLconst newDoc = newWindow.document; // 访问DOM（需同源）
- 发送消息：使用 postMessage() 实现跨域通信（需目标页面监听）：newWindow.postMessage('Hello from parent!', 'https://example.com');
- 安全通信：适用于复杂数据交换，尤其跨域场景。
- 步骤：
创建信道并传递端口给新窗口：const channel = new MessageChannel();const newWindow = window.open('child.html', '_blank');newWindow.onload = () => { newWindow.postMessage('init', '*', [channel.port2]);};channel.port1.onmessage = (e) => console.log('Received:', e.data);
子页面通过端口通信：// child.html 中window.addEventListener('message', (e) => { const port = e.ports[0]; port.postMessage('Port message received');});
- document.referrer：新页面可通过此属性获取来源页URL（只读）。
- document.domain：若主页面和新页面同源（或顶级域名相同），可设置 document.domain 解除部分跨域限制（已逐渐被弃用，推荐 postMessage）。
- 同源策略：直接操作新窗口的DOM或属性（如 window.document）仅限同源页面。
- 弹窗拦截：浏览器可能拦截 window.open()，需由用户操作（如点击）触发。
- 安全性：使用 postMessage 时务必验证目标域名，避免信息泄露。
父页面：
document.getElementById('openBtn').addEventListener('click', () => { const newWindow = window.open('child.html', '_blank'); newWindow.onload = () => { newWindow.postMessage({ type: 'greeting', text: 'Hello' }, '*'); };});子页面（child.html）：
window.addEventListener('message', (e) => { if (e.data.type === 'greeting') { console.log('Received:', e.data.text); // 可回复消息 window.opener.postMessage('Hi parent!', '*'); }});通过上述方法，可灵活实现新页面的打开与跨窗口交互，兼顾功能性与安全性。
热门标签
