栀子舒

栀子舒博客
blog.naitu.com
   
QQ咨询

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

2019-6-5 23:34 分类： 活动线报 评论(0)

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

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

    
	
	
  1. 
		<script type="text/javascript">
	
    2. 

	
  2. 
		var ua = navigator.userAgent.toLowerCase(); 
	
    3. 

	
  3. 
		var isWeixin = ua.indexOf('micromessenger') != -1; 
	
    4. 

	
  4. 
		var isAndroid = ua.indexOf('android') != -1; 
	
    5. 

	
  5. 
		var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
	
    6. 

	
  6. 
		if (!isWeixin) { 
	
    7. 

	
  7. 
		var opened = window.open('wxError.html', '_self');
	
    8. 

	
  8. 
		}
	
    9. 

	
  9. 
		</script>
	
    10.

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

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

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

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

微信截图_20190525103925.png

wxError.html页面代码如下： 

    
	
	
  1. 
		<!DOCTYPE html>
	
    2. 

	
  2. 
		<html>
	
    3. 

	
  3. 
		 <head>
	
    4. 

	
  4. 
		 <meta charset="utf-8">
	
    5. 

	
  5. 
		 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	
    6. 

	
  6. 
		 </head>
	
    7. 

	
  7. 
		 <body>
	
    8. 

	
  8. 
		 <script type="text/javascript">
	
    9. 

	
  9. 
		 var ua = navigator.userAgent.toLowerCase();
	
    10. 

	
  10. 
		 var isWeixin = ua.indexOf('micromessenger') != -1;
	
    11. 

	
  11. 
		 var isAndroid = ua.indexOf('android') != -1;
	
    12. 

	
  12. 
		 var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
	
    13. 

	
  13. 
		 if (!isWeixin) {
	
    14. 

	
  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. 

	
  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. 

	
  16. 
		 } 
	
    17. 

	
  17. 
		 </script>
	
    18. 

	
  18. 
		 </body>
	
    19. 

	
  19. 
		</html>
	
    20.

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

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

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

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

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

代码如下： 

    
	
	
  1. 
		<script type="text/javascript">
	
    2. 

	
  2. 
		 var ua = navigator.userAgent.toLowerCase();
	
    3. 

	
  3. 
		 var isWeixin = ua.indexOf('micromessenger') != -1;
	
    4. 

	
  4. 
		 if (!isWeixin) {
	
    5. 

	
  5. 
		 var opened = window.open('wxError.html', '_self');
	
    6. 

	
  6. 
		 }
	
    7. 

	
  7. 
		 $(function(){
	
    8. 

	
  8. 
		 /*禁用微信分享功能 */
	
    9. 

	
  9. 
		 function onBridgeReady() {
	
    10. 

	
  10. 
		 WeixinJSBridge.call('hideOptionMenu');
	
    11. 

	
  11. 
		 }
	
    12. 

	
  12. 
		 if (typeof WeixinJSBridge == "undefined") {
	
    13. 

	
  13. 
		 if (document.addEventListener) {
	
    14. 

	
  14. 
		 document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
	
    15. 

	
  15. 
		 } else if (document.attachEvent) {
	
    16. 

	
  16. 
		 document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
	
    17. 

	
  17. 
		 document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
	
    18. 

	
  18. 
		 }
	
    19. 

	
  19. 
		 } else {
	
    20. 

	
  20. 
		 onBridgeReady();
	
    21. 

	
  21. 
		 }
	
    22. 

	
  22. 
		 if (isWeixin) {
	
    23. 

	
  23. 
		 window.alert = function(name){
	
    24. 

	
  24. 
		 var iframe = document.createElement("IFRAME");
	
    25. 

	
  25. 
		 iframe.style.display="none";
	
    26. 

	
  26. 
		 iframe.setAttribute("src", 'data:text/plain,');
	
    27. 

	
  27. 
		 document.documentElement.appendChild(iframe);
	
    28. 

	
  28. 
		 window.frames[0].window.alert(name);
	
    29. 

	
  29. 
		 iframe.parentNode.removeChild(iframe);
	
    30. 

	
  30. 
		 }
	
    31. 

	
  31. 
		 }
	
    32. 

	
  32. 
		 });
	
    33. 

	
  33. 
		</script>
	
    34.
这样网页只能在微信客户端内访问的限制就完成了

×

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

扫码支持
请土豪扫码随意打赏

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

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

打赏作者

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

手机点击获取资源

栀子舒

本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢程序，请支持正版软件购买注册，得到更好的正版服务。侵删请致信

相关推荐

发表评论

表情
看不清楚？点图切换

网友评论（0）