浏览器窗口切换（从一个页面切换到另一个页面并且不刷新）

最新推荐文章于 2025-07-26 12:16:10 发布

原创最新推荐文章于 2025-07-26 12:16:10 发布 · 7.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种在浏览器中从一个页面跳转到另一个通过window.open打开的同源页面的方法，利用window.name属性实现页面间的相互切换。在A页面通过window.open打开B页面后，B页面可通过window.opener.name获取A页面的window.name，从而实现跳转。

从一个页面跳转到另一个浏览器打开过的页面（只有通过window.open 打开的同源页面才能相互切换）

window.open("javascript:;", name);

第一项参数 javascript: 后可添加js 代码也会执行。
第二项参数 name 即要跳转到页面的 window.name。

如果在A页面里通过 window.open 打开一个新页面 B ，那么在B页面内可通过window.opener.name 拿到A页面的 window.name 去跳转到A页面，即:

window.open("javascript:;", window.opener.name);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

haogemr

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【前端】监听页面切换--浏览器页面间切换，路由切换，导航守卫页面刷新或关闭

灵活的小胖子

07-31

3362

前提，PC端应用一，监听浏览器页面间切换场景：浏览器某一个页面A，PC端页面B，页面AB间切换方案： 1.使用vue-visibility-change 安装： npm i vue-visibility-change -S 2.导入main.js import visibility from 'vue-visibility-change'; Vue.use(visibility); 3.使用 i，全局使用： main.js visibility.change((evt,

软件测试Selenium浏览器控制与窗口切换技巧：自动化测试中的多页面交互解决方案

05-29

内容概要：本文深入讲解了Selenium在自动化测试中的浏览器控制与窗口切换技巧，旨在帮助测试人员突破多页面交互和复杂业务流程测试的瓶颈。文章首先介绍了环境准备与基础配置，包括启动浏览器、访问指定URL、页面...

参与评论您还未登录，请先登录后发表或查看评论

倒计时10秒后关闭当前窗口

javajavami的博客

08-04

1007

js 打开页面的方法总结

热门推荐

cx18333的博客

11-18

1万+

1.window.open,2.location.hrer,3.location.repalce,4.a标签跳转,页面窗口跳转方法总结

打开新窗口，每次都在原有新窗口打开

qq_42560402的博客

12-03

1317

** 打开新窗口，每次都在原有新窗口打开。 ** window.open(‘https://element.eleme.cn/#/zh-CN/component/table’, ‘scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes’);

JavaScript——操作浏览器窗口

又一个装逼博客

06-29

739

例如：学习总结：例如：例如：ECMAScript第一版标准发布于：1997年

原生JS实现组件切换（不刷新页面）

宝子的博客

12-19

310

这是通过原生Es6实现的组件切换，代码很简单，原理和各种框架原理大致相同。

vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法

09-03

然而，当遇到多个ECharts图表分布在多个页面上，并且需要根据浏览器窗口大小动态调整图形尺寸时，可能会遇到一些挑战。本文将详细介绍一种终极解决方案，确保每个页面上的ECharts图表都能正确响应窗口尺寸的变化。 ...

js点击button按钮跳转到另一个新页面

10-25

这可以通过JavaScript来实现，因为JavaScript提供了一种机制，可以不刷新当前页面的情况下，通过编程实现页面的跳转。下面详细地介绍如何使用JavaScript让一个按钮点击后跳转到新页面。首先，要实现点击事件，我们...

JS 切换多窗口

04-23

NULL 博文链接：https://onestopweb.iteye.com/blog/2247409

Vue页面刷新记住页面状态的实现

10-15

在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。这通常涉及到页面状态的持久化。本文将详细介绍如何在Vue项目中实现这一功能。首先，Vue提供了`...

掌握Selenium浏览器控制与窗口切换：提升自动化测试效率的多页面交互指南

最后，文章总结了Selenium浏览器控制与窗口切换的最佳实践与调试技巧，提供了常见问题排查表，如窗口切换失败、找不到Frame、弹窗处理异常等典型问题的解决方案。同时，文章建议读者结合实际测试项目进行练习，重点...

js切换窗口不刷新只是激活切换窗口

u014708123的博客

12-26

777

窗口切换页面不刷新的原理，首先要同源，其次是指定window.name;方法就是调用window.open();

2024年JS监听浏览器窗口切换_前端如何监听浏览器是用的哪个窗口，0基础学习前端开发

2401_84435555的博客

05-04

835

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记这个事件已经得到现代浏览器广泛的支持，不过一些老版本的浏览器需要加相应的前缀。Opera13前缀webkit 33无需前缀10前缀moz18无需前缀10前缀ms12.107。

如何使a标签打开新页面并阻止刷新当前页面

weixin_33858249的博客

03-05

1057

错误： HTML中，使用href属性时，当前页面和新页面均跳转到URL指定的页面，即当前页面也刷新： <li id='goToBack'><a href='**.action' target='_blank'>管理</a></li> 正确： HTML中，使用href属性返回空： <li id='goToBack'><a href='...

论多窗口相互关联下window.open打开已在的窗口时只激活不刷新的实现方案

Oliver尹的博客

12-25

7748

本文主要实现的场景是，在任意一个窗口内首次打开指定页面时通过新建窗口的方式打开，在任意一个窗口内打开已打开的界面时，仅激活对应窗口，且对应窗口不刷新

JS 浏览器窗口控制

lemaktub的博客

01-13

1796

业务场景：老系统里（非SPA）在主页面有很多子模块页面，在点击去到子模块a页面打开新窗口，如果a页面已经在浏览器打开则不打开新的窗口，切换至a页面窗口首先，了解window对象 1.window.open window.open('http://www.baidu.com') //打开一个新页面返回打开的window对象本身 2.window.focus() window.focus() //聚焦到当前页面 3.window.closed window.closed //可以拿到 window的

JavaScript多窗口切换技术详解

weixin_42452483的博客

07-26

409

同源策略限制了来自不同源的文档或脚本如何进行交互。一个源通常由协议、域名和端口号组成。比如，协议 http，域名 example.com 和端口号 8080 构成一个源。只有当两个 URL 的协议、域名和端口完全一致时，它们才具有相同的源。同源策略的目的是为了防止恶意脚本窃取网站敏感数据和执行跨站脚本攻击(XSS)。在多窗口操作中，由于涉及到不同页面间的数据访问，这一策略变得尤其重要。

Vue3实现页面点击跳转到另一个浏览器窗口，另一个页面关闭的时候刷新，如果在同一个窗口内，切换页面不刷新

最新发布

08-15

### 实现页面间通信与刷新控制在 Vue 3 中实现页面间通信并控制页面刷新行为，可以通过结合浏览器的 `window.open()`、`window.postMessage()` 和 `beforeunload` 事件来完成。目标是在打开新窗口并在关闭该窗口时触发原页面的刷新，而在同一窗口内切换页面时不刷新内容。 #### 打开新窗口并监听关闭状态使用 `window.open()` 方法可以打开新窗口，同时可以通过轮询 `window.closed` 属性来检测新窗口是否已关闭。一旦检测到窗口关闭，可以触发原页面的刷新操作： ```javascript const newWindow = window.open('/new-page'); const checkWindowClosed = setInterval(() => { if (newWindow.closed) { clearInterval(checkWindowClosed); location.reload(); // 刷新当前页面 } }, 500); ``` 此方法通过定时检查新窗口是否关闭，来决定是否执行页面刷新操作。 #### 使用 `window.postMessage()` 实现跨窗口通信若希望在关闭新窗口时主动通知原页面刷新，可以使用 `window.postMessage()` 实现跨窗口通信。在新窗口中，当用户点击关闭按钮或触发 `beforeunload` 事件时，向原窗口发送消息： ```javascript // 新窗口中发送消息 window.opener.postMessage('refreshParent', '*'); // 原窗口中监听消息 window.addEventListener('message', (event) => { if (event.data === 'refreshParent') { location.reload(); } }); ``` 该方法确保在新窗口关闭时，原页面可以及时刷新。 #### 同一窗口切换页面时不刷新在 Vue 3 的单页应用中，使用 Vue Router 进行页面切换时，默认不会刷新页面。可以通过监听路由变化并更新组件状态来实现局部更新： ```javascript import { useRoute } from 'vue-router'; import { watch } from 'vue'; export default { setup() { const route = useRoute(); watch( () => route.path, (newPath) => { // 根据 newPath 更新组件状态，不刷新整个页面 } ); } }; ``` 此方式确保在页面切换时仅更新所需部分，而不是重新加载整个页面。 #### 示例：在 Vue 3 中整合上述逻辑以下是一个完整的 Vue 3 组件示例，展示如何打开新窗口并在关闭时刷新原页面： ```javascript import { onMounted, onUnmounted } from 'vue'; import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); let newWindow = null; let checkWindowClosed = null; const openNewWindow = () => { newWindow = window.open('/new-page'); checkWindowClosed = setInterval(() => { if (newWindow && newWindow.closed) { clearInterval(checkWindowClosed); location.reload(); } }, 500); }; const handleRouteChange = () => { // 在同一窗口切换页面时不刷新 }; onMounted(() => { window.addEventListener('message', (event) => { if (event.data === 'refreshParent') { location.reload(); } }); route.watch(() => route.path, handleRouteChange); }); onUnmounted(() => { window.removeEventListener('message', () => {}); }); return { openNewWindow }; } }; ``` 该组件实现了打开新窗口、监听关闭状态并刷新原页面的功能，同时确保在单页应用内切换路由时不刷新页面。 ---