网页面限制只能在微信中打开,并且不可以使用分享及浏览器打开功能 - 栀子舒博客

网页面限制只能在微信中打开,并且不可以使用分享及浏览器打开功能栀子舒

栀子舒博客
blog.naitu.com

网页面限制只能在微信中打开,并且不可以使用分享及浏览器打开功能

由于一些网站站长不希望网址暴露在浏览器,所以要求必须是微信浏览。

那么我们可以通过请求的标识来判断是什么浏览器,来进行限制,代码如下:

  1. <script type="text/javascript">
  2. var ua = navigator.userAgent.toLowerCase();
  3. var isWeixin = ua.indexOf('micromessenger') != -1;
  4. var isAndroid = ua.indexOf('android') != -1;
  5. var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
  6. if (!isWeixin) {
  7. var opened = window.open('wxError.html', '_self');
  8. }
  9. </script>

以上就是判断的浏览器类型,有微信,android,ios

当然也可以直接引用本站的静态地址,引入代码如下:

  1. <script type="text/javascript" src="https://www.tianfayl.com/static/js/restrictwx.js"></script>

如果判断不是微信浏览器,则跳转到提示页面,页面使用微信原始页面如下图:

网页面限制只能在微信中打开,并且不可以使用分享及浏览器打开功能

wxError.html页面代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. var ua = navigator.userAgent.toLowerCase();
  10. var isWeixin = ua.indexOf('micromessenger') != -1;
  11. var isAndroid = ua.indexOf('android') != -1;
  12. var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
  13. if (!isWeixin) {
  14. document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="weui.css">';
  15. document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
  16. }
  17. </script>
  18. </body>
  19. </html>

weui.css 由于太长就不在这里贴了,可以末下载,并在wxError页面的第14行的

  1. <link rel="stylesheet" type="text/css" href="weui.css">

修改引入地址,也可以直接在页面引用我的静态地址,引用代码如下:

  1. <link rel="stylesheet" type="text/css" href="https://www.tianfayl.com/static/css/weui.css">

禁止分享和浏览器打开等选项禁用

代码如下:

  1. <script type="text/javascript">
  2. var ua = navigator.userAgent.toLowerCase();
  3. var isWeixin = ua.indexOf('micromessenger') != -1;
  4. if (!isWeixin) {
  5. var opened = window.open('wxError.html', '_self');
  6. }
  7. $(function(){
  8. /*禁用微信分享功能 */
  9. function onBridgeReady() {
  10. WeixinJSBridge.call('hideOptionMenu');
  11. }
  12. if (typeof WeixinJSBridge == "undefined") {
  13. if (document.addEventListener) {
  14. document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  15. } else if (document.attachEvent) {
  16. document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
  17. document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  18. }
  19. } else {
  20. onBridgeReady();
  21. }
  22. if (isWeixin) {
  23. window.alert = function(name){
  24. var iframe = document.createElement("IFRAME");
  25. iframe.style.display="none";
  26. iframe.setAttribute("src", 'data:text/plain,');
  27. document.documentElement.appendChild(iframe);
  28. window.frames[0].window.alert(name);
  29. iframe.parentNode.removeChild(iframe);
  30. }
  31. }
  32. });
  33. </script>
这样网页只能在微信客户端内访问的限制就完成了

×

感谢您的支持,我们会一直保持!

网页面限制只能在微信中打开,并且不可以使用分享及浏览器打开功能
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:栀子舒博客 » 网页面限制只能在微信中打开,并且不可以使用分享及浏览器打开功能

发表评论

表情

网友评论(0)