通过window.open跳转得到上一个页面的URL

最新推荐文章于 2023-11-07 07:30:00 发布
原创 最新推荐文章于 2023-11-07 07:30:00 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#url

本文介绍了如何使用JavaScript在浏览器中打开新窗口，并展示了如何在不同窗口间进行数据传递和交互。通过示例代码，读者可以了解到如何利用window.open()方法创建新窗口以及如何通过window.opener属性访问并操作打开当前窗口的父窗口。
页面1:
Js代码 复制代码
  1. window.open("test.html");  
 
页面2:
Js代码 复制代码
  1. alert(window.opener.location.href);  
解决js中window.open弹出的是上次的缓存页面问题
10-26
然而，有时候我们可能会遇到一个问题：当使用 `window.open()` 打开一个新的URL时，浏览器显示的并不是最新版本的页面，而是之前访问过的缓存版本。这可能对用户体验造成困扰，尤其是当页面内容需要实时更新时。本文...
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
10-26
具体到window.open的参数，它通常接收三个参数：第一个参数为新窗口所加载的URL地址，第二个参数为新窗口的名字，第三个参数为一系列以逗号分隔的窗口特征参数。这些参数包括窗口的大小、位置、工具栏、菜单栏、地址...
window.open()参数传递及获取
热门推荐
m0_72712500的博客
10-09 2万+
window.open()方法是用来打开新浏览器窗口或标签页的 JavaScript 方法。可以使用该方法传递参数并获取新窗口或标签页的引用。
JS 中的 Window.open() 用法详解
老电影故事的博客
11-07 2997
方法是 JavaScript 中的一个内置方法，用于在浏览器中打开一个新的窗口或标签页。需要注意的是，由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是在用户的交互下触发的。因此，在实际的开发中，我们需要谨慎使用这个方法，避免被浏览器误认为是恶意行为。
JavaScript中的window.open()打开一个新的网页
一份耕耘 一份收货
01-09 5693
今天遇到一个问题，就是要用JavaScript中的window.open()打开一个新的网页，而且新打开的网页要在原来网页的基础之上，在查了一些资料之后，找到里一下方法：（其中，url 为链接的地址）       1、如果要打开一个新的窗口，就加上参数 _blank,如下所示：                           2、如果你想弹出的窗口代替本身的话,将参数换
window.open方法打开的页面，在服务器端怎么获取opener的url
龙胜LONGAIN
01-04 4622
肯定有很多朋友和我一样，时不时的想通过“链接来源”来限制一些访问权限，然而我们并不能保证任何时候都能获得这样一个“链接来源”。在某些情况下，我们获取这个对象是一个null值。究其原因是客户端ie通过构造http头发送给服务器一些信息，其中包括“链接来源”（如果有的话）。http头封装一个叫做“HTTP_REFERER”的属性。那么什么时候“链接来源”是无效的呢？     有必要看看HTTP_RE
js 用window.open(参数) 打开新窗口，在新窗口怎么获取传过来的参数
weixin_34355559的博客
04-29 3911
unction openwin(taskno){window.open ('playIt.jsp?taskno='+taskno,'play','height=100,width=400,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')} 在新窗口怎么获取tasknourl ?后面的是 window...
js中window.open打开一个新的页面
10-25
在JavaScript中，`window.open` 是一个非常重要的方法，它用于在浏览器窗口中打开新的、现有的或已命名的窗口。这个方法在网页交互和动态内容加载时尤其常见，比如创建弹窗、打开新链接等。`window.open` 方法的基本...
精选资源
javascript 打开页面window.location和window.open的区别.docx
01-13
### JavaScript打开页面window.location与window.open的区别 #### 一、概述 在JavaScript中，`window.location` 和 `window.open` 都是用来控制浏览器导航的重要API，但它们在使用场景、功能特性和行为上有显著的...
js中window.open的参数及注意注意事项
11-24
在JavaScript中，`window.open()` 是一个非常有用的函数，它用于在浏览器中打开新的窗口或者标签页。这个函数有四个参数，每个都有特定的作用和注意事项。让我们深入了解一下这些参数： 1. **URL（可选）**：这个...
用window.open()打开新页面并该页面传值
sakura的博客
10-08 7729
用window.open()打开新页面并该页面传值 情景: ​ 需要带参数的打开一个新的页面，但是会发现根据官方的文档，window.open()里面可以携带的四个参数并没有可以传值的。 ​ https://www.runoob.com/jsref/met-win-open.html ​ 但是可以这样子传,这是父窗口的部分代码： //这个ReportFlag为需要传递的变量 window['reportFlag'] = ReportFlag //然后打开子窗口，具体路径根据实际改变 window.open
window.open跳转页面传值,跳转页面接受值
momo牛的博客
09-30 1136
A页面跳转传值： form.on('submit(add)', function(data) { window.open('qiantaishow.html?expressNum='+$('#expressNum').val()//qiantaishow.html为下一个页面 +"&expressSendName="+$('#expressSendName').val() +"&expressHarvestName="+$('#expre.
open页面后 返回父页面解决方案
weixin_33750452的博客
05-27 206
为什么80%的码农都做不了架构师？>>> ...
window获取历史url_在前端重构中获取到的一些经验总结
weixin_39581739的博客
12-09 497
作者：hugh_https://juejin.im/post/5d4edd516fb9a06b2d77c3d7前言本文主要谈谈在前端重构中获取到的一些经验总结。大处着眼，小处着手！从细微处谈谈前端重构的一些注意事项。本文主要针对SPA类型前端应用，如果你的项目使用的前端模板，后端路由+渲染，本文可能不太符合。创建一个前端应用大致会包含一些的流程注：测试放在开发之后也许是个错误，前端开发者也需要对测...
在vue中使用windom.open()跳转html文件传递和获取参数
yuan0209的博客
04-05 1799
有些项目可能你使用的是 vue，但是却要打开 html 文件去完成业务功能，比如打开 word 编辑文档之类的，这时候可以用 windom.open()这个方法去实现。
前端跨页面通信
大灰狼的小绵羊哥哥的博客
04-15 1793
背景 用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。 本篇文章就是对前端跨页面通信的解决方案做了一个了解。 onstorage WindowEventHa
前端页面路由跳转方式详解
实泽有之，无泽虚之
03-30 1万+
本文总结以下几种前端页面路由的跳转方式：1.navigate;2.window.open;3.document.getElementById("a标签id").click();4.routerLink。
使用window.open切换到之前打开过的新页面
weixin_34101229的博客
03-18 2738
使用window.open打开页面，不刷新已经打开过的页面 我的思路是：把已经打开过的页面的title和window对象存起来，如果要打开的页面的title已经存在了，就直接foucs到已存在的页面window对象，不新调用open函数。 var iframeWin = []; $("#btn-open-in-new-win").on("click",function () { ...
vue 中 window.open打开的子路由如何调用上一个页面的方法
li22356的博客
09-20 867
vue 中 window.open打开的子路由如何调用上一个页面的方法
js使用window.open跳转页面后，原页面跳到了首页
最新发布
07-31
<think>我收到了用户的查询，是关于JavaScript中window.open方法导致原页面跳转到首页的问题。用户提供了多个引用资料，我需要分析这些资料来找出原因和解决方案。 首先看引用[1]，它描述了使用window.open或window.location.href跳转后返回原页面无法再次跳转的问题。原因是跳转值未被清空，解决方案是用全局变量记录打开的窗口，在再次跳转前先关闭旧窗口。这给了我第一个思路：可能是历史记录管理问题导致页面返回到首页。 引用[2]详细说明了window.open的用法，提到可以用"_blank"参数在新标签页打开，避免替换当前页面。这提示我参数使用不当可能是原因之一。 引用[3]展示了三种跳转方式的代码示例：window.location赋值、replace和window.open。其中replace方法会替换历史记录，可能导致后退时跳过原页面。这可能是关键线索。 引用[4]给出了window.open的具体使用案例，但未直接涉及首页跳转问题。 综合这些信息，我推断主要原因可能有三个：历史记录被替换、跨域安全限制或参数设置错误。最核心的应该是replace方法的使用，它会使原页面从历史记录中移除，导致后退时显示首页而非原页面。 解决方案方面： 1. 优先建议使用"_blank"参数避免替换当前页面 2. 改用window.location.href而非replace方法 3. 添加rel="noopener noreferrer"属性防止安全限制干扰 4. 对于需要保留原页面的场景，考虑使用AJAX局部更新 最后需要生成相关问题，可以围绕参数区别、跨域影响、历史记录管理和替代方案展开。这样既解决了核心问题，又提供了扩展知识。</think>### JavaScript `window.open` 导致原页面跳转到首页的原因及解决方法 #### 问题原因分析 1. **历史记录被替换** 使用 `window.location.replace()` 时，原页面会从浏览历史中移除[^3]。当用户点击后退按钮时，浏览器会跳过原页面，直接显示历史记录中的上一个页面（通常是首页或前一个站点）。 2. **跨域安全限制** 若新页面与当前页面不同源，浏览器可能因安全策略限制后退行为，导致返回异常页面[^1]。 3. **参数使用错误** 使用 `window.open(url, '_self')` 会用新页面 **替换当前标签页**，等同于 `window.location.replace()` 的效果[^2]。 #### 解决方案 ```javascript // ✅ 推荐方案1：新标签页打开（保留原页面） function navigateSafe() { window.open('https://newpage.com', '_blank', 'noopener,noreferrer'); // 添加 noopener 避免安全风险[^2] } // ✅ 推荐方案2：使用 location.href（保留历史记录） function navigateWithHistory() { window.location.href = 'https://newpage.com'; // 可后退到原页面 } // ❌ 避免使用以下方式 function problematicNavigate() { // 方式1：原页面从历史记录中移除 window.location.replace('https://newpage.com'); // 方式2：直接替换当前标签页 window.open('https://newpage.com', '_self'); } ``` #### 关键区别说明 | **方法** | 是否保留原页面历史 | 后退行为 | |------------------------|------------------|------------------| | `window.open(..., '_blank')` | 是 | 正常返回原页面 | | `window.location.href` | 是 | 正常返回原页面 | | `window.location.replace()` | 否 | 跳过原页面到上一条记录 | | `window.open(..., '_self')` | 否 | 同 replace 效果 | #### 额外建议 1. **单页应用(SPA)场景** 使用前端路由（如 Vue Router/React Router）进行无刷新跳转： ```javascript // Vue Router 示例 this.$router.push({ path: '/new-page' }) ``` 2. **后退事件监听** 若需特殊处理后退逻辑，可监听 `popstate` 事件： ```javascript window.addEventListener('popstate', (event) => { console.log('返回原页面，可执行恢复操作'); }); ``` --- ### 相关问题 1. `window.open` 的 `noopener` 参数有什么安全作用？如何防止新页面通过 `window.opener` 访问原页面？ 2. 使用 `window.location.replace()` 相比 `window.location.href` 有哪些典型应用场景？ 3. 在跨域跳转时，浏览器的历史记录管理策略有哪些限制？如何规避？ 4. 单页应用(SPA)中如何实现页面跳转不刷新且保留历史记录？ [^1]: 使用 `window.open()` 或 `window.location.href` 跳转后返回原页面无法再度跳转的问题，源于历史记录未被正确维护。 [^2]: `window.open()` 的 `_self` 参数会替换当前页面，而 `_blank` 会打开新标签页，影响历史记录行为。 [^3]: `window.location.replace()` 会移除当前页面的历史记录，导致后退时跳过原页面。 [^4]: 正确使用 `window.open` 需注意参数配置，避免意外覆盖当前页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值