微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片

最新推荐文章于 2022-02-18 22:41:20 发布

一只迷路精灵

最新推荐文章于 2022-02-18 22:41:20 发布

阅读量1.8k

点赞数

分类专栏：移动端文章标签：手机移动端

本文链接：https://blog.csdn.net/qq_28494649/article/details/79279063

版权

移动端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下代码都经过iphone7，华为MT7 ，谷歌浏览器，微信开发者工具，PC端微信验证。如有bug，还请在评论区留言。

demo链接：https://pan.baidu.com/s/1c35mbjM 密码：5yyf

1.移动端微信浏览器返回刷新事件，在返回后的页面上加上以下代码：

<script type="text/javascript">
        $(function () { 
          var isPageHide = false; 
          window.addEventListener('pageshow', function () { 
            if (isPageHide) { 
              window.location.reload(); 
            } 
          }); 
          window.addEventListener('pagehide', function () { 
            isPageHide = true; 
          }); 
        })

    </script>

2.监听微信浏览器返回事件，在需要返回监听的页面上插入以下代码：

	<script type="text/javascript">
            $(function() {
            　　pushHistory();
            　　　　window.addEventListener("popstate", function(e) {
                　　　　alert("我监听到了浏览器的返回按钮事件啦"); //根据自己的需求实现自己的功能  
                　　　　pushHistory(); //去掉这行，监听只能执行一次
            　　}, false);
            　　//停留在当前页面，阻止页面返回
            　　function pushHistory(){
                　　　　var state = {
                    　　　　　　title: "title",
                    　　　　　　url: "#"
                　　　　};
                　　　　window.history.pushState(state, "title", "#");
            　　}
        });
    </script>

监听：按返回键退出微信浏览器

<script type="text/javascript">
	$(function() {
            pushHistory();
            window.addEventListener("popstate", function(e) {
                WeixinJSBridge.call('closeWindow');
                pushHistory(); //去掉这行，监听只能执行一次
            }, false);

            function pushHistory() {
                var state = {
                    title: "title",
                    url: "#"
                };
                window.history.pushState(state, "title", "#");
            }
        });
</script>

3.网页防复制：

（1）移动端：body标签上面加 ontouchstart="return false"（整个网页不能touch），或者用user-select：none；（文本不能复制）

<body  ontouchstart="return false">
复制不了~
</body>

.no-select{ 
    -webkit-user-select:none;  
    -moz-user-select:none;  
   -o-user-select:none;  
   user-select:none;  
}

（2）PC端：页面上插入以下JS

img{  
    pointer-events: none;/*禁用鼠标*/  
}

4.移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片

img{
	pointer-events: none;
}

让某图单独可以长按识别二维码或保存图片

img-a{pointer-events: visible;}

一只迷路精灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片

以下代码都经过iphone7，华为MT7 ，谷歌浏览器，微信开发者工具，PC端微信验证。如有bug，还请在评论区留言。 demo链接：https://pan.baidu.com/s/1c35mbjM 密码：5yyf1.移动端微信浏览器返回刷新事件，在返回后的页面上加上以下代码： $(function () { var isPageHide
复制链接

扫一扫