Javascript限制网页只能在微信内置浏览器中访问
转载 &发布时间：日 10:52:31 & 投稿：hebedich
最近正在开发一个微信公众账号，其中有一项功能是用户发送文字消息给公众号，然后公众号返回图文消息给用户，用户再点击图文消息即可跳转到一个网页链接，在微信的内置浏览器中打开。
那么问题就来了，这个网页首先涉及到了移动web前端开发，我优先选择了用HTML5+bootstrap组合来实现页面的美观效果，前端其他的任务交给javascript解决（这里我是完全使用原生javascript代码，没有用到任何的框架，因为考虑到手机加载网页的速度本来就慢，而且框架中很多用不到的功能也会随网页一起加载，耗费用户流量）。
一切功能都就绪以后，客户试用也觉得很满意，之后我就把代码提交到了正式的服务器上。不过，对方又突然提到了一点：你做的页面确实挺漂亮的，兼容性也不错，但是这个页面用电脑上的浏览器也是可以访问的，那么其他人就可以很随便地查看页面的源代码，进而copy整个页面，能不能有什么方法防止这一点？那么问题就又来了，我是第一次做微信二次开发，还没遇到过这样的需求，怎么搞定呢？
一时间想不出来，后来我就把这个问题先放了放，去做后台的一些业务。在做后台的一个数据采集功能时，PHP代码当中用到了$_SERVER['HTTP_USER_AGENT']这个参数，我突然想到浏览器访问网页时都会发送一个UserAgent给服务器，它里面包含了一些浏览器及用户操作系统的基本信息，既然微信有内置浏览器，那么用微信浏览网页时这个UserAgent里面会不会带上和微信相关的独有的标识呢（毕竟腾讯这么大个公司，而微信又是他们的核心产品之一）？干脆用代码打印一下它的UserAgent来一探究竟，javascript代码如下：
&script type="text/javascript"&
&&& alert(navigator.userAgent);
在我的手机上得到了如图所示的结果：
这一下果然还真的看到了不一样的地方，相信聪明的朋友也已经发现了，没错，就是这个东西：MicroMessenger/6.0.0.50_r，斜杠后面的这一串就是我当前使用的微信的版本号，前面则应该是微信的一个独有标识了。其实我一开始看成了MicroMessage，想着中文翻译过来是“微消息”的意思，但仔细一看发现不是的，后面查了词典才知道Messenger这个词有“报信者，送信者”的意思，也就不觉得奇怪了。这个标识应该来说是其他浏览器不会有的，那么解决方案就来了，请看代码：
&script type="text/javascript"&
&&& // 对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器
&&& var useragent = navigator.userA
&&& if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
&&&&&&& // 这里警告框会阻塞当前页面继续加载
&&&&&&& alert('已禁止本次访问：您必须使用微信内置浏览器访问本页面！');
&&&&&&& // 以下代码是用javascript强行关闭当前页面
&&&&&&& var opened = window.open('about:blank', '_self');
&&&&&&& opened.opener =
&&&&&&& opened.close();
这段代码在Android、iPhone、iPad、PC上都进行了测试，只要不是在微信内部打开网页的，首先就会弹出上面那个警告框，此时后面的页面是空白的，什么都还没加载，当点击警告框的确定按钮之后，最后三行代码将强行关闭当前页面。OK，到这里算是实现了用户原本的意思了，可以简单收工了。
等等，真的可以这样收工了么？你确定不会有其他问题？当然不是，其实这个方法并不会让你高枕无忧，因为对于伪造的UserAgent，还是可以绕过这条限制的，总的来说就是防君子不防小人了，大家懂得。当然，如果哪位朋友有解决这个问题的更好方法，还麻烦在下面评论告知，技术在于相互的分享和交流嘛，呵呵。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具其他回答(3)
看404时的连接和平时的连接.不可能是同一个.这个是iis上的404.都没进运行时.
收获园豆：20
园豆：26019
园豆：26019
99.99%是链接错了
收获园豆：10
园豆：13984
解决了吗？想知道你怎么解决的。我也碰到这个问题。
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。当前位置：&&&&&&
微信内置浏览器对于html5的支持
我在做针对微信的HTML5应用, 目前遇到的几个问题是一. 安卓版微信直接调用系统浏览器内核, iOS则是调用safari, 所以要使用新特性, 只能升级系统了, 对于很多老系统, 新的特性是没法用的, 就连基本的canvas, toDataURL 在4.4 以下是不能导出 image/jpeg 格式的, 直接导出的 png格式, 往往非常大, 好几百K, 二. localStorage等, 是可以用, 但是据说有微信退出之后就被清空的问题.三. 据 Sencha 项目的调研显示, 目前最适合 HTML5 项目的是 iOS 平台,我亲测, 确实如此, 比如一个基本的css3 transition转换做的图片轮播, iOS上和原生应用基本没啥区别, 安卓上则是卡的出奇, 而且安卓在进行一些复杂计算的时候,往往很慢, 比如涉及canvas计算的操作四. 不好调试, 安卓上的调试, 我是装chrome beta 32版 app, 然后结合桌面chrome通过 USB 开启远程调试, 但是由于两者的 webkit 版本不同, 调试的结果往往不能作为最终参考依据. 说实话有时候有问题只能靠猜了(看你基本功扎实与否, 对css盒模型理解的彻底与否, 对js 的开发理解的深入与否,都能很大程度上提升你&猜对&的几率, 当然, 你最好祈祷你的人品值是够用的, 否则一弄一上午时间真的不算什么), 别忘了 try catch 和 alert, 你会发现你现在真的是爱上它们了... 安卓上的另一种调试方式是通过 ADB 过滤控制台日志的方式, 可以追踪程序错误, 这个有些复杂,我还没试过. iOS 也是可以通过 safari进行远程调试的, 前提是你需要在MAC上进行操作, 我没有MAC, 没试过.五. 对于开发, 优雅降级与渐进增强将会是个很好的理念, 你 可以 try { 先进API} catch(e) { 老旧的实现方式} 这种方式, 确保在别人刷机到新ROM之后就还能用旧版实现方式,(事实上我没有搞, 真是复杂,很累了每天, 埋了颗雷, 我的4.1 在4.4将会爆掉, 别告诉我老板...)六. 用百度目前可能还得不到很多有用的信息, 国内目前HTML5还处于炒概念的阶段, 很少有人做一些实打实的事情, 别告诉我谁用了什么API做了什么花出来了, 那些API都明摆在那里, 稍微有点编程常识的都能拿来用, 关键是一个实现, 其实是 一个API ,外加你要修复9个bug, 这种方式来完成的, 只懂那一个 API, 是不够的,现在.七. 你的程序运行速度与你脚本和css3使用量成反比, 与网速成正比. 所以, 少用脚本, 简化逻辑, 慎用css3, 压缩图片, 代码, 等等, 这些仍然很重要.八. 你会渐渐发现, 你进入了另一个 ie6 的世界, 移动开发基本是webkit 的天下, 比如我现在, 就没考虑过 wp, 当然, 这也是基于公司的要求来的.九. 有的人把 HTML5 理解为几个 背景渐变的圆角阴影按钮, 如果真是这样认为的话, 那他现在就可以开始开发了, 这些基本的支持, 还是有了的.
&&上一篇：下一篇：&&
业务咨询：
招聘热线：028-
地址:成都市人民南路四段成科西路三号省计算机应用研究中心B栋一楼
欢迎PR>=5的网站与我们交换友情链接(网站制作、网站建设类网络公司站点，联系QQ：)
(C) 四川方法数码科技有限公司
四川方法创享科技有限公司
成公网备字第[]号
蜀ICP备号 川B2-
川公网安备 25号
您是第125个访客微信链接在浏览器中打不开怎么办
微信链接在浏览器中打不开怎么办
　　相信做微信的许多小伙伴们都遇到把部分微信链接复制到电脑中的浏览器中,结果提示此功能只能在微信浏览器中使用，这该怎么办?下面学习啦小编告诉你具体的解决方法!
　　微信链接在浏览器中打不开的解决方法
　　下载：&User-Agent Switcher Options&插件并安装到浏览器上。如图所示：
　　点击&User-Agent Switcher Options&配置相应的微信设置,如图所示：
　　点击&New User-Agent&，如图所示：
　　按图中所示，填写&Mozilla/5.0 (L U; Android 2.3.6; zh- GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255&，并命名所建的新的用户代理(User-Agent)为&weixin&，最后保存
　　使用时，只需点击&User-Agent Switcher&并选择你所建的&User-Agent&,即可在电脑浏览器中访问微信网页了。
看了&微信链接在浏览器中打不开怎么办&的人还看了
【猜您感兴趣】
360安全卫士可以设置电脑的默认程序，你如播放器，压缩工具等等，下面由学习啦小编为大家整理了360安全卫士怎么设置默认程序的解决方法，希望对大家有帮助! 360...
淘宝店铺可以设置多种促销活动，比如送优惠券，买家购买商品可及时抵用就是很见效的一种，设置淘宝店铺优惠券的方法其实很简单，下面由学习啦小编告诉你! 设置淘...
不小心把电脑文件删除了，怎么办?其实是可以恢复的!下面是学习啦小编给大家整理的一些有关用360安全卫士恢复的电脑文件的方法，希望对大家有帮助! 用360安全卫士...
Windows系统升的很快，不知不觉就到了Win10了。但由于Win10正式版发布时间短，各种各样的bug出现，比如点击开始菜单就没有反应，下面是学习啦小编给大家整理的一...
用ai设计的时候，可以将默认的快捷键修改成自己比较顺手的快捷键，下面是学习啦小编给大家整理的一些有关ai修改默认的快捷键的方法，希望对大家有帮助! ai修改默...
往往在电脑使用了一段时间之后就会变慢,变卡,那么XP系统如何提升运行速度呢?下文学习啦小编分享了XP系统提升运行速度的方法，希望对大家有所帮助。 XP系统提升运...微信浏览器打不开? - 知乎1被浏览389分享邀请回答暂时还没有回答，开始写第一个回答