Javascript限制网页只能在微信内置浏览器中访问
那么问题就来了，这个网页首先涉及到了移动web前端开发，我优先选择了用HTML5+bootstrap组合来实现页面的美观效果，前端其他的任务交给javascript解决（这里我是完全使用原生javascript代码，没有用到任何的框架，因为考虑到手机加载网页的速度本来就慢，而且框架中很多用不到的功能也会随网页一起加载，耗费用户流量）。
一切功能都就绪以后，客户试用也觉得很满意，之后我就把代码提交到了正式的服务器上。不过，对方又突然提到了一点：你做的页面确实挺漂亮的，兼容性也不错，但是这个页面用电脑上的浏览器也是可以访问的，那么其他人就可以很随便地查看页面的源代码，进而copy整个页面，能不能有什么方法防止这一点？那么问题就又来了，我是第一次做微信二次开发，还没遇到过这样的需求，怎么搞定呢？
一时间想不出来，后来我就把这个问题先放了放，去做后台的一些业务。在做后台的一个数据采集功能时，PHP代码当中用到了$_SERVER['HTTP_USER_AGENT']这个参数，我突然想到浏览器访问网页时都会发送一个UserAgent给服务器，它里面包含了一些浏览器及用户操作系统的基本信息，既然微信有内置浏览器，那么用微信浏览网页时这个UserAgent里面会不会带上和微信相关的独有的标识呢（毕竟腾讯这么大个公司，而微信又是他们的核心产品之一）？干脆用代码打印一下它的UserAgent来一探究竟，javascript代码如下：
<script type="text/javascript">
alert(navigator.userAgent);
</script>
在我的手机上得到了如图所示的结果：
这一下果然还真的看到了不一样的地方，相信聪明的朋友也已经发现了，没错，就是这个东西：MicroMessenger/6.0.0.50_r844973.501，斜杠后面的这一串就是我当前使用的微信的版本号，前面则应该是微信的一个独有标识了。其实我一开始看成了MicroMessage，想着中文翻译过来是“微消息”的意思，但仔细一看发现不是的，后面查了词典才知道Messenger这个词有“报信者，送信者”的意思，也就不觉得奇怪了。这个标识应该来说是其他浏览器不会有的，那么解决方案就来了，请看代码：
<script type="text/javascript">
// 对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
// 这里警告框会阻塞当前页面继续加载
alert('已禁止本次访问：您必须使用微信内置浏览器访问本页面！');
// 以下代码是用javascript强行关闭当前页面
var opened = window.open('about:blank', '_self');
opened.opener = null;
opened.close();
}
</script>
这段代码在Android、iPhone、iPad、PC上都进行了测试，只要不是在微信内部打开网页的，首先就会弹出上面那个警告框，此时后面的页面是空白的，什么都还没加载，当点击警告框的确定按钮之后，最后三行代码将强行关闭当前页面。OK，到这里算是实现了用户原本的意思了，可以简单收工了。
等等，真的可以这样收工了么？你确定不会有其他问题？当然不是，其实这个方法并不会让你高枕无忧，因为对于伪造的UserAgent，还是可以绕过这条限制的，总的来说就是防君子不防小人了，大家懂得。当然，如果哪位朋友有解决这个问题的更好方法，还麻烦在下面评论告知，技术在于相互的分享和交流嘛，呵呵。
相关文章
这篇文章主要介绍了用webpack4开发小程序的实现方法，分享通过webpack来构建小程序的开发架构，感兴趣的小伙伴们可以参考一下2019-06-06
今天小编就为大家分享一篇layui关闭弹窗后刷新主页面和当前更改项的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
倒计时js代码想必大家都有用过，大同小异，本例为大家介绍的是简单易用的,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了结合ES6类编写JavaScript创建型模式，本文开始系统性的对20多种JavaScript 设计模式进行简单概述，然后结合ES6类的方式来编写实例代码展示其使用方式，需要的朋友可以参考一下2022-07-07
uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透解决办法
最近用uin-app做项目遇到了不少问题,下面这篇文章主要给大家介绍了关于uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了layui实现下拉框三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
清空div中input标签值的方法有很多，下面为大家介绍下使用循环清空某个div中的input标签值的具体实现2014-09-09
下面小编就为大家带来一篇弹出遮罩层后禁止滚动效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
使用JavaScript italics方法实现文本变斜体教程示例
这篇文章主要为大家介绍了JavaScript italics实现文本变斜体教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要介绍了javascript实现带节日和农历的日历特效,效果十分棒，需要的朋友可以参考下2015-02-02
最新评论