zoukankan      html  css  js  c++  java
  • 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过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;}
  • 相关阅读:
    Linux下使用Nexus搭建Maven私服
    使用Nexus搭建Maven内部服务器
    windows Maven3.0 服务器配置搭建
    Linux中more和less命令用法
    Jmeter使用入门
    【转载】 DeepMind发表Nature子刊新论文:连接多巴胺与元强化学习的新方法
    【转载】 十图详解tensorflow数据读取机制(附代码)
    【转载】 tensorflow中 tf.train.slice_input_producer 和 tf.train.batch 函数
    (待续) https://zhuanlan.zhihu.com/p/27629294
    ( 待续 ) https://zhuanlan.zhihu.com/p/57864886
  • 原文地址:https://www.cnblogs.com/ovocake/p/8391307.html
Copyright © 2011-2022 走看看