HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Html5拦截Android返回键方法大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

一个需求要拦截移动端返回键. 使用js拦截物理返回键事件我认为不可取.可以在导航做一些手脚

下面说两个知识点

  • 锚点:命名锚记像一个迅速定位器一样是一种页面内的超级链接
  • popstate事件 :当活动历史记录条目更改时,将触发popstate事件

原理也比较简单更改锚点history堆栈会发生变化,并且页面不会刷新.

下面是代码

  1. test.html
<!DOCTYPE html>
<html>
  <Meta name="viewport" content="width=device-width">
  <script type="text/javascript">
    function TESTClicker(){
        LOCATIOn.href = './test2.html'
    } 
  </script>
<body>
  <button onclick="TESTClicker()">跳转test2</button>
</body>
</html>
  1. test2.html
<!DOCTYPE html>
<html>
  <Meta name="viewport" content="width=device-width">
  <script type="text/javascript">
     var count = 0 ;
     window.history.pushState(null,null,"#");
     window.addEventListener("popstate",function(E) {
        console.log("-------------popstate---");
        window.history.pushState(null,"#");
        document.getElementById('logView').innerHTML = "用户点击返回" + (++count)
     })
  </script>
<body>
  <p id="logView">test2</p>
</body>
</html>

大佬总结

以上是大佬教程为你收集整理的Html5拦截Android返回键方法全部内容,希望文章能够帮你解决Html5拦截Android返回键方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。