1,問題原因:瀏覽器兼容問題,Chrome支持,Safari不支持
解決姿勢:https://blog.csdn.net/qingyuexiao/article/details/84707473
function goBack(){
//解決Safari中后退功能的兼容問題
if (navigator.userAgent && /(iPhone|iPad|iPod|Safari)/i.test(navigator.userAgent)) {
window.location.href = window.document.referrer;
} else {
window.history.back(-1); //根據需要可使用history.go(-1);
}
}
2,問題已經解決,我想說說我的場景與解題思路
場景是在vue框架的基礎上,把某一個模塊的頁面,全部替換為第三方的站點,使用iframe標簽去展示
一,可能是冒泡導致,因為是簡單的調用了window.history.back()
參考:https://www.cnblogs.com/likesunny/p/5688429.html
所以自己寫代碼來驗證,如下圖:
首頁.png
第二頁.png
測試后發現,不管我有沒有阻止冒泡,在Chrome下和Safari下,都沒有問題,我在考慮可能是第三方網站的代碼問題,我去查了第三方的代碼,就是簡單的
window.history.back(-1)
,到這里并沒有解決我的問題,想另外的方法
二,有沒有可能是子頁面window的問題
子頁面下window拿到的可能是父頁面的window
我使用了幾種方式去驗證
window
window.self
window.top
this
window.document.querySelector('iframe').contentWindow
- 因為第三方站點與父頁面之間是跨域的,導致父頁面
contentWindow
下是獲取不到子頁面document,很多事情就不好做了,可以通過postMessage是實現,但是還要監聽,就放棄了 - 斷點調試了一些,其實子頁面直接獲取的window,其實就是它當前的window,不管是否子頁面的文檔已經加載完成,
window.self === window.top
是false,也查看了this,window。
所以可以確定子頁面拿到的window不是父頁面的window,就是它當前的window
三,既然找不到源頭,那我事后修改
就是監聽返回事件,對監聽的事件進行處理進行后補處理
使用的是window下popstate事件,這里不多解析,可以參考下:https://www.jb51.net/html5/606481.html
- popstate 事件只能在真機下移動端可以接收到
拿到事件之后,
發現拿到之后并沒有多大作用 - 在子頁面寫監聽,發現沒有用,因為父頁面已經返回,子頁面監聽到也沒有作用
- 在父頁面寫監聽,首先因為跨域contentWindow.history.back()不能調用,其次是父頁面返回不了,或者返回后再跳回來,沒有意義;
window.onpopstate = () => {
console.log('onpopstate')
window.history.pushState('forward', null, '#')
window.history.forward(1)
}
不過因為有些機子行有些不行,有些要點兩下才有效果,可能是自己也不大懂popstate,pushstate
偶然翻到這一篇文章:https://www.cnblogs.com/zeussbook/p/10870479.html
說是瀏覽器問題,特意搜索Chrome下,Safari下的history.back(),果然是這樣。終于知道時間是怎么過去的了