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的返回按鈕或者瀏覽器的上一頁或後退按鈕的事件呢。
js監聽PC/手機/微信瀏覽器後退按鈕事件,可跳轉到指定頁面;
$(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下如何實現?