關于APP內嵌H5后退按鈕問題

phoenixsky 發布于2019-08-22 11:07 / 1715人閱讀

摘要：最近都在用做內嵌頁面，在點擊后退時如果在路由中跳轉過多次點后退會后退很多次才能退出頁面用戶體驗很差。同時，這些方法會和事件一起工作。

最近都在用vue做APP內嵌H5頁面，在APP點擊后退時如果在路由中跳轉過多次點后退會后退很多次才能退出頁面用戶體驗很差。

下面來說下解決方法
因為hisotry模式官方說需要服務器配置所以路由一直在用hash模式，針對這一需求需要了解h5新加的history模式

H5引入了history.pushState()和history.replaceState()這兩個方法，他們允許添加和修改history實體。同時，這些方法會和window.onpostate事件一起工作。

pushState方法用一個新的url取代當前頁面的url并把當前頁面的url存進歷史記錄，

replaceState只用新url取代當前頁面的url，但是不把當前頁面的url存進歷史記錄

pushState()有三個參數:state對象，標題字符串(現在沒有瀏覽器支持)，URL字符串(可選，如果為空，設置為當前頁面的url)

只有前進后退可以觸發popstate事件，對于不是通過pushState，replaceState兩個方法產生的url，state對象為空
所以首先監聽一下popstate事件在監聽事件里直接調回退的方法

  window.addEventListener("popstate", function(e) {
    window.history.back()
  }, false);

這樣就可以直接退出當前頁面了

還要history在服務器端渲染不出來的問題前端其實也可以用一種笨方法解決的

把你服務器的地址直接卸載路由里，根路徑要把你頁面的名字帶上，就像這樣

因為在APP里所以也不存在刷新頁面找不到的問題，就不需要服務端來幫忙啦~
希望可以幫到有類似需求的小伙伴，有更好的方法的大神也來指導下

GPU云服務器云服務器 html 按鈕后退 h5后退 js數據不存在 webrtc內嵌到app中關于php問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91817.html

「前端早讀君009」快速小程序開發之微信小程序內嵌 H5

摘要：前言微信小程序中可以直接運行頁面，這一新組件的產生，可能直接導致小程序數量迎來一波高峰。微信小程序配置系列問題配置域名業務域名中配置的就是小程序以及和中引用的域名。今日勵志語要接受自己行動所帶來的責任而非自己成就所帶來的榮耀。前言微信小程序中可以直接運行 web 頁面，這一新組件 web-view 的產生，可能直接導致小程序數量迎來一波高峰。本篇博文將從業務選型，微信小程序后臺...

wh469012917 2019-08-23 14:28 評論0 收藏0
H5實例教學--微信內嵌視頻1（案例淺析）

摘要：但好在中，新增了屬性，可以使視頻內聯播放。以上為該案例主要需要解決的問題。補充資料視頻播放優化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼首個H5案例解析從頭開始分析在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只需要考慮不同的 iOS ...

quietin 2019-08-20 14:29 評論0 收藏0