iframe子頁面調用history.back(),父頁面會返回的問題解答

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(),果然是這樣。終于知道時間是怎么過去的了

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 本節介紹各種常見的瀏覽器事件。 鼠標事件 鼠標事件指與鼠標相關的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,483評論 0 4
  • 引言 最近心氣比較浮躁,潛意識告訴自己慢一點,再慢一點,感覺只是說給自己聽的。 為了緩和一下自己扭曲的心態,寫篇博...
    OzanShareing閱讀 2,798評論 0 0
  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,526評論 1 11
  • 瀏覽器窗口有一個history對象,用來保存瀏覽歷史。 如果當前窗口先后訪問了三個網址,那么history對象就包...
    君臨12138閱讀 3,092評論 0 3
  • 冬日陽光 藤椅清茶 回眸花落 冬日陽光成都, 草堂溪邊木桌, 茶船茶杯茶蓋, 老婆娃娃閑坐, 崇州藤椅峨眉茶...
    今晚扁老虎閱讀 250評論 0 1