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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_27721169/article/details/80512535

由于使用扫一扫来获取登陆链接,所以不希望网址暴露在浏览器,所以要求必须是微信浏览。

可以通过请求的标识来判断是什么浏览器:

            var ua = navigator.userAgent.toLowerCase();  
            var isWeixin = ua.indexOf('micromessenger') != -1;  
            var isAndroid = ua.indexOf('android') != -1;  
            var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

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

if (!isWeixin) {  
	var opened = window.open('wxError.html', '_self');
}
如果判断不是微信浏览器,则跳转到提示页面,页面使用微信原始页面如下图

这个页面(wxError.html)比较简单,代码如下:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    </head>  
    <body>  
        <script type="text/javascript">  
            var ua = navigator.userAgent.toLowerCase();  
            var isWeixin = ua.indexOf('micromessenger') != -1;  
            var isAndroid = ua.indexOf('android') != -1;  
            var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);  
            if (!isWeixin) {  
                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">';  
                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>';  
            }  
        </script>  
    </body>  
</html> 
weui.css 由于太长就不在这里贴了,可以点击下载

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

                    var ua = navigator.userAgent.toLowerCase();  
	            var isWeixin = ua.indexOf('micromessenger') != -1; 
	            if (!isWeixin) {  
	                var opened = window.open('wxError.html', '_self');
	            }
                    $(function(){
				/*禁用微信分享功能 */  
				function onBridgeReady() {  
					WeixinJSBridge.call('hideOptionMenu');  
				}  
			  
				if (typeof WeixinJSBridge == "undefined") {  
					if (document.addEventListener) {  
						document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);  
					} else if (document.attachEvent) {  
						document.attachEvent('WeixinJSBridgeReady', onBridgeReady);  
						document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);  
					}  
				} else {  
					onBridgeReady();  
				}  
				if (isWeixin) {  
					window.alert = function(name){  
						var iframe = document.createElement("IFRAME");  
						iframe.style.display="none";  
						iframe.setAttribute("src", 'data:text/plain,');  
						document.documentElement.appendChild(iframe);  
						window.frames[0].window.alert(name);  
						iframe.parentNode.removeChild(iframe);  
					}  
				}});
这样就可以了


展开阅读全文

没有更多推荐了,返回首页