移动端H5window.location.href跳转第三方页面返回后当前页面无法使用window.history.back()

页面A跳转到页面B,页面B使用window.location.href跳转第三方页面,然后在返回,页面B使用window.history.back()无法返回到页面A

ios的Safari浏览器上有的手机可以返回到页面A
有的手机不可以返回,这是为啥?

可以返回的手机打印window.history.length只增加一次
不可以返回的手机每次使用window.location.href跳转一次,window.history.length就增加一次,,Safari浏览器物理返回左滑返回都不行

回答引自chatgpt
可能与浏览器的历史记录缓存有关。在使用 window.location.href 跳转到第三方页面后,浏览器可能会缓存这个历史记录,导致后续使用 window.history.back() 返回时无法回到页面 A。

对于可以返回的手机,可能浏览器的历史记录缓存机制不同,或者浏览器本身就对历史记录缓存做了特殊处理。

为了解决这个问题,可以尝试使用下面的方法:
使用 window.location.replace() 跳转到第三方页面,而不是 window.location.href。这个方法会替换当前的历史记录,而不是添加新的历史记录,可能能够避免历史记录缓存导致的问题。

在页面 B 中,可以在跳转到第三方页面之前,使用 window.history.replaceState() 方法修改当前的历史记录,将其替换为页面 A 的历史记录。这个方法也可以避免历史记录缓存导致的问题。

在页面 A 中,可以使用 window.location.reload() 方法刷新页面,这样可以清除浏览器的历史记录缓存,避免后续的问题。

在移动端H5中,使用window.location.href跳转到第三方页面后,如果返回到当前页面后无法使用window.history.back()返回上一页,可能是因为浏览器在历史记录中创建了多个记录,其中一个或多个记录与当前页面无关。这可能会导致用户无法正确地返回到他们最初访问的页面。

为了解决这个问题,您可以尝试使用以下方法:

使用window.location.replace()方法而不是window.location.href。window.location.replace()方法会覆盖当前页面的历史记录,并将用户重定向到第三方页面。当用户返回到当前页面时,页面的历史记录将被删除,因此可以使用window.history.back()返回到上一页。

在跳转到第三方页面之前,使用window.history.pushState()方法将当前页面的URL添加到浏览器的历史记录中。这样,当用户返回到当前页面时,可以使用window.history.back()返回到上一页。

例如,您可以在跳转到第三方页面之前使用以下代码:

// 在跳转到第三方页面之前添加当前页面的URL到浏览器的历史记录中
window.history.pushState({}, '', window.location.href);

// 使用window.location.href跳转到第三方页面
window.location.href = 'http://www.example.com';

然后,在用户返回到当前页面时,您可以使用window.history.back()返回到上一页。
回答整理自chatgpt,如果有帮助麻烦采纳一下,谢谢啦

基于new bing部分指引作答:
这是因为移动端浏览器对于页面历史记录(window.history)的处理方式可能有所不同,特别是在处理跨域跳转和第三方页面的情况下。

在一些移动设备的浏览器中,当通过window.location.href跳转到第三方页面时,浏览器会将当前页面(页面B)的历史记录清除,并创建一个新的历史记录来表示第三方页面的访问。这样,在返回时,window.history.back()只能返回到第三方页面,而无法返回到之前的页面(页面A)。

另一方面,支持返回到页面A的设备可能对页面历史记录的处理方式略有不同。它们可能会保留页面B的历史记录,使得在返回时,window.history.back()可以成功返回到页面A。

至于window.history.length的增加情况,对于不同设备和浏览器也可能存在差异。在一些情况下,每次通过window.location.href跳转到新页面,浏览器会将新页面添加到历史记录中,导致window.history.length的增加。而在其他情况下,可能只会增加一次,表示整个跳转过程作为一个单一的历史记录。

总之,这种行为差异是由于移动设备和浏览器之间的实现差异引起的,无法统一适用于所有情况。为了确保在不同设备和浏览器上的一致性,建议在开发中使用其他方法来处理页面跳转和返回,例如使用浏览器的后退按钮或自定义导航控制。

.href 换成 .open 试一下

兼容性调整下


此次是对接其他项目,内嵌我方的移动端页面,但是返回的时候只能点击浏览器提供的返回按钮,因此返回的时候要盘端状态,此事我把状态保存到localStorage里,只要判断state是true就跳转到前三个页面,此时用到了这个

window.history.go(-3)
使用go方法的时候是不会刷新重载页面的,所以,每次执行的都是缓存的判断逻辑,无法返回到第三方的页面,因此此时必须要用到下边这个back方法

window.history.back(-3);
back方法是跳转页面并且刷新页面,同时执行

以下是所有跳转以及区别

window.history.go(-1);  //返回到上一页
window.history.back(-1);  //返回到上一页并且刷新该页面
window.location.reload();  //重新加载
window.location=location;   
window.location.assign(location);
window.document.execCommand(‘Refresh’);
window.navigate(location);
window.location.replace(location);
document.URL=location.href ;

window.location.href 和 window.history.back 在 Safari 浏览器上无法返回的问题。有几种可能的原因和解决办法:

有可能是页面未初始化完成时就使用了 window.location.href 进行跳转,导致页面 A 没有记录到浏览器历史记录中。你可以尝试在页面 A 完全加载后再进行跳转,或者使用其他方式进行跳转,比如 a 标签或者 form 表单。

有可能是 Safari 浏览器对 history.back 的兼容性问题,你可以尝试使用 history.go (-1) 来代替 history.back ()。另外,如果你是在 a 标签的 onclick 事件中调用 history.go (-1),你需要在之前调用 event.preventDefault () 来阻止默认行为。

有可能是 window.location.href 和 document.referrer 的不匹配问题,你可以尝试使用 window.location.replace ("pagehere.html") 来代替 window.location.href,这样可以避免在历史记录中生成多余的条目。或者你可以使用 window.location = document.referrer 来代替 history.back (),这样可以直接跳转到上一个页面。

在这种情况下,页面 B 中使用 window.history.back() 方法无法返回到页面 A 的原因是,当页面 B 使用 window.location.href 跳转到第三方页面后,浏览器会将页面 A 和页面 B 的浏览历史记录都删除,导致浏览器历史记录中没有页面 A 的信息,从而无法通过 window.history.back() 返回到页面 A。

一种解决方案是,在页面 B 中不要使用 window.location.href 跳转到第三方页面,而是使用 window.open() 打开一个新窗口,并在新窗口中跳转到第三方页面。这样可以保留页面 A 和页面 B 的浏览历史记录,并且可以在新窗口中进行操作,不会影响页面 B 的返回行为。例如:

// 在新窗口中打开第三方页面
var popupWindow = window.open('third-party-page.html');

// 返回上一页
window.history.back();

在这个示例中,我们在页面 B 中使用 window.open() 方法打开一个新窗口,并跳转到第三方页面。然后我们在页面 B 中使用 window.history.back() 方法返回上一页,此时浏览器历史记录中仍然保留了页面 A 和页面 B 的信息,可以正常返回到页面 A。需要注意的是,由于浏览器的安全性限制,打开新窗口可能会被拦截,建议使用用户事件触发打开新窗口操作。

如果app中内置h5的跳转页面,如果你使用window.history.back()或者window.history.go(-1),出现不能返回的错误现象的话。可以看下能否使用
location.href = document.referrer;
这个方法解决。其中referrer 属性可返回载入当前文档的文档的 URL, 如果当前文档不是通过超链接访问的,那么当前文档的URL为NULL。

试试使用window.location.replace代替window.location.href来实现页面跳转

因为不同的浏览器对于同一种行为的表现不同。