请在微信客户端打开链接 html
1 前言
有时候,需要链接只能在微信上打开,如果不是,则提示请在微信客户端打开链接的字眼的网页,网页代码如下:(这个是网页应用授权时,非微信上打开,就会出现,然后把它单独拿出来了)
2 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta name= "viewport" content= "width=device-width, initial-scale=1, user-scalable=0" > </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="https://res.wx.qq.com/open/libs/weui/0.4.1/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> |
3 效果图
4 原理
出现这个网页的判定,其实也非常简单,只需要判定header中的user-agent的信息(navigator.userAgent.toLowerCase())即可。
5 小结
就是记录下来,以备后用。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步