微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和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;}?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 点击图片放大至原始图片大小
- 下一篇： 构建前端自动化工作流环境