以下代碼都經過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;}
