在 Vue 项目中使用 `
window.open` 时，如果发现
只能打开一个
新窗口而无法多次
打开不同的窗口，通常是因为浏览器的弹出窗口拦截机制或代码中对窗口标识的处理方式导致的。
### 弹出窗口拦截机制
浏览器为了防止恶意弹窗，默认会对频繁调用 `
window.open` 的行为进行拦截。尤其是在用户没有明确交互（如点击事件）的情况下，连续调用 `
window.open` 很容易被浏览器阻止。即使是在用户点击事件中，如果未正确管理窗口名称或未释放之前的窗口引用，也可能导致后续调用无效。
### 窗口标识管理不当
在 Vue 页面中，引用中提到的示例通过 `this['pageNum' + this
.num]` 来保存窗口引用，并通过切换 `num` 的值来复用窗口名。然而，这种方式可能导致
新窗口无法
打开，因为每次调用时，如果未正确关闭或释放前一个窗口引用，`
window.open` 可能会复用已存在的窗口名称，从而在某些浏览器中只更
新现有窗口而非创建
新窗口[^1]。
###
解决方案
1
. **避免窗口名称重复**：确保每次调用 `
window.open` 时使用不同的窗口名称。可以使用时间戳或随机字符串作为窗口名称的一部分，以保证唯一性。
```javascript
methods: {
gotoNewPage() {
const { href } = this
.$router
.resolve({
path: '要跳转的路由页面路径',
});
const
windowName = `new
Window_${Date
.now()}`;
window.open(href,
windowName, 'width=800,height=600');
}
}
```
2
. **确保用户交互触发**：将 `
window.open` 的调用放在用户的直接交互事件中（如 `click`），以避免被浏览器拦截。
3
. **使用 `target="_blank"`**：如果不需要对
新窗口进行编程控制，可以直接使用 `<a>` 标签并设置 `target="_blank"`，这样可以绕过浏览器对 `
window.open` 的限制。
```html
<a :href="externalUrl" target="_blank" rel="no
opener noreferrer">
打开新窗口</a>
```
4
. **处理跨域情况下的通信**：如果需要在
新窗口与父窗口之间进行通信，可以使用 `
window.postMessage` 方法。确保在
打开新窗口后，正确监听和处理消息。
```javascript
const new
Window =
window.open('https://example
.com', '_blank');
window.addEventListener('message', (event) => {
if (event
.origin !== 'https://example
.com') return;
console
.log('Received message:', event
.data);
});
new
Window.postMessage('Hello from parent', 'https://example
.com');
```
5
. **检查 Vue 路由配置**：如果使用了 Vue Router 并设置了 `base` 路径，确保通过 `this
.$router
.resolve()` 方法生成正确的 URL，以避免路径错误导致页面无法加载[^2]。
```javascript
const { href } = this
.$router
.resolve({
path: '/target-path',
query: { param1: 'value1' }
});
window.open(href, '_blank');
```
### 示例代码
以下是一个完整的 Vue 方法示例，展示了如何正确
打开多个
新窗口：
```javascript
methods: {
gotoNewPage() {
const { href } = this
.$router
.resolve({
path: '/target-path',
query: { id: this
.itemId }
});
const
windowName = `
window_${Math
.random()
.toString(36)
.substr(2, 9)}`;
window.open(href,
windowName, 'width=800,height=600');
}
}
```
通过上述方法，可以有效
解决 Vue 中 `
window.open`
只能打开一个
新窗口的
问题。
---
###
扫一扫
2474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
