1. 程式人生 > >IOS微信瀏覽器返回事件popstate監聽

IOS微信瀏覽器返回事件popstate監聽

問題

通過監聽popstate事件,來判斷是否點選返回按鈕,比如從A頁面跳轉到B頁面(監聽popstate),然後再跳轉到C頁面,點選返回的按鈕,測試成功,包括安卓版,但是問題來了,IOS版的微信,是會立即觸發popstate事件,導致直接從C頁面跳轉到A頁面,其他的支付寶(安卓、IOS)、微信(安卓)都是可以,就是微信IOS版不行。

經過查詢相關資料,選擇了一個方法,不過有點弊端,但是並不影響操作,通過popstate、pageshow兩個事件進行判斷驗證。

/** 
 * 瀏覽器回退事件監聽 
 */  
var listenerBackHandler = {  
    param: {  
        isRun: false
, //防止微信返回立即執行popstate事件 }, listenerBack: function () { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); window.addEventListener("popstate", function (e) { if (listenerBackHandler.param.isRun) { window.location.href = "Home/Index"
; //返回到主頁 } } }, false); }, //初始化返回事件 initBack: function () { window.addEventListener('pageshow', function () { listenerBackHandler.param.isRun = false; setTimeout(function () { listenerBackHandler.param.isRun = true
; }, 1000); //延遲1秒 防止微信返回立即執行popstate事件 listenerBackHandler.listenerBack(); }); } }

原理
因為在IOS微信瀏覽器裡,返回上一個頁面時,必定會觸法popstate事件,就會導致立即執行返回到A頁面。通過pageshow事件先延遲1秒的事件,讓執行popstate事件時無法返回,等定時器把isRun的值改成true,然後再點選返回按鈕,就會再次執行popstate事件,就可以返回到你想要的頁面。

弊端
就是如果有人手速太快,返回到B頁面就立即點選返回按鈕,此時出現點選沒有反應,再次點選就能返回,給人的感覺好像沒有點選到返回按鈕,這個概率還是很小。

相關推薦

IOS瀏覽器返回事件popstate

問題: 通過監聽popstate事件,來判斷是否點選返回按鈕,比如從A頁面跳轉到B頁面(監聽popstate),然後再跳轉到C頁面,點選返回的按鈕,測試成功,包括安卓版,但是問題來了,IOS版的微信,是會立即觸發popstate事件,導致直接從C頁面跳轉到A頁

瀏覽器返回刷新,瀏覽器返回事件,網頁防復制

one value 返回 push hid 微信驗證 根據 doc add 以下代碼都經過iphone7,華為MT7 ,谷歌瀏覽器,微信開發者工具,PC端微信驗證。如有bug,還請在評論區留言。 demo鏈接:https://pan.baidu.com/s/1c35mbj

ios瀏覽器click事件不起作用的解決方法

ont func 手機 alert 微信 搜索 pan font js代碼 $(document).on( "click", ".weui_cell", functi

js瀏覽器返回按鈕事件

pushHistory(); window.addEventListener("popstate", function(e) { alert("好嗨喲,感覺到達了人生巔峰!");//根據自己的需求實現的功能 }, false); function pushHistory()

iOS瀏覽器回退不重新整理(瀏覽器回退事件

iOS在微信瀏覽器回退是不重新載入頁面的,有些時候是需要重新載入的,所以需要監聽回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventLis

IOS瀏覽器無法自動播放背景音樂的解決辦法

IOS系統為了節省使用者的流量,禁止了audio標籤的自動播放,所以在蘋果手機上H5的audio標籤不能自動播放,目前我只找到了微信瀏覽器上的解決辦法。 <body> <audio id="bgmusic" src="audio/9282.wav"

蘋果IOS瀏覽器下自動播放音訊問題+jquery click點選閃屏的問題

蘋果IOS微信瀏覽器下自動播放音訊問題 因為ios下微信的瀏覽器是不允許音訊自動播放的,所以投機取巧尋找解決辦法。在此做一下筆記,呼叫一下就好了。 function audioAutoPlay(id){ var audio = document.getElemen

解決瀏覽器返回上一頁面強制重新整理的問題

window.onpopstate push的對立就是pop,可以猜到這個事件是在瀏覽器取出歷史記錄並載入時觸發的。但實際上,它的條件是比較苛刻的,幾乎只有點選瀏覽器的“前進”、“後退”這些導航按鈕,或者是由JavaScript呼叫的history.back()等導航方法,且切換前後的兩條歷史記錄都屬於

iOS瀏覽器中自動播放HTML5 audio(音樂)的2種正確方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

解決iOS底部返回橫條問題

最近做微信公眾號的開發,遇到 iOS新版微信的底部會出現返回小橫條的坑。從公眾號開啟頁面,底部有個返回的小橫條,會遮擋頁面底部。但是再重新整理一下該元件頁面,就不會遮擋了。其實就是第一次出現小白條時,頁面高度獲取會有問題。 一、解決部分問題 查資料得知 小橫條

ios瀏覽器自動播放音樂

自動播放 code lse art style clas touch remove bsp //ios自動播放音樂 function audioAutoPlay(id){ var audio = document.getElementById(id),

h5 ios瀏覽器 input獲取焦點後,收起軟鍵盤,光標錯位

分享 input info 產生 put 進行 元素 內容 lex 整個頁面布局如下: 外層設置fixed的原因是不讓頁面在瀏覽器中進行上下拖拽, 最後形成的結果是:輸入框獲取焦點輸入內容後,光標錯位,導致不能選中輸入框重新獲取焦點(頁面上移,但是布局未產生影響);

addTextChangedListener和TextWatcher實現編輯框的輸入效果

     最近在做一個仿照微信的UI設計,其中微信的輸入框監聽效果挺人性化的,倘若編輯框裡面沒有內容,登入按鈕就不高亮,並且不讓你登入。所以在網上找一下實現的方法,最後發現了有addTextChangedListener 這麼一個東東。最後實現效果還是不錯滴( ^_^ )。

解決IOS內置瀏覽器返回後不執行js腳本的問題

style load 返回 on() cti 發現 bsp 內置瀏覽器 false 在A頁面寫一個$(function(){}) 後隨便點擊一個URL跳轉到B頁面 利用微信內置瀏覽器 返回鍵返回到A頁面後發現這段JS不執行,後來找到了解決方案 $(f

瀏覽器 網頁開發 返回》 按鈕

問題描述: 在實際的應用中,我們常常需要實現在移動app和瀏覽器中點選返回、後退、上一頁等按鈕實現自己的關閉頁面、調整到指定頁面或執行一些其它操作的 需求,那在程式碼中怎樣監聽當點選微信、支付寶、百度糯米、百度錢包等app的返回按鈕或者瀏覽器的上一頁或後退按鈕的事件呢。

jsPC/手機/瀏覽器後退按鈕事件,可跳轉到指定頁面;

$(document).ready(function (e) { var counter = 0; if (window.history && window.history.pushState) {

瀏覽器左上角返回按鈕的

問題描述1: 微信開發的時候,在公眾號選單中開啟一個H5頁面(如:個人中心),在這個頁面上的一些操作,經過多次跳轉後,點選左上角的返回按鈕,發現會原封不動的返回至上一級頁面。 即 公眾號選單->A->B->C,點選返回後,返回了B(且無重新

自帶瀏覽器返回鍵的

最近的一個微信web專案,微信自帶瀏覽器的返回鍵會對專案造成影響,自然而然得唄pm加了需求,在查閱一些列部落格以後,找到了合理的解決方案,就目前我用的手機都還是相容狀態,下面放上方法: $(function(){       pushHistory();       win

瀏覽器跳轉頁面後再返回,如何恢復到跳轉前的位置的問題。

客戶端 his ont 恢復 func 詳情 size light list 以商品列表頁打比方, 眾所周知,點擊商品進入詳情頁要保證不損壞當前列表頁狀態的做法通常是在a標簽上加上target=_blank進行新開一個窗口打開詳情頁 這個做法是非常普遍的,包括很多

ios瀏覽器如何喚醒app?app已上架應用寶

roi eply android 應用寶 地址 微信瀏覽器 ply andro 下載地址 android下可以通過在應用寶微下載地址後面加參數&android_schema=‘應用schema‘來實現,ios下如何實現?