首页技术总结正文内容

微信跳转浏览器html5,微信跳转浏览器或提示手机端打开HTML代码最新

技术总结

更新时间：2024-12-23 04:36:57 8

admin 管理员组

文章数量: 887021

一些做微信营销活动或者需要推广下载apk文件的域名经常会红，也就是域名被封了，微信屏蔽访问了！

而微信屏蔽的原理主要应该有两条：

第一是系统的自动检测

第二是微信工作人员的人工检测

至于我们防止屏蔽通常也有两种方法：(通过屏蔽和监测一些腾讯的监测IP等。从而避免系统的查杀。保证链接在微信和QQ中一直可以直接打开。不用担心被封禁从而无法打开的情况！！)1、弹框提示法，这种事最简单的方法。方式如下图(适用于下载，违规网址打开

这个其实就是通过判断是否是微信浏览器而实现的，如果是微信的浏览器就弹出模态框图片提示用户跳去浏览器

下面分享下邵先森使用的源代码：

你的标题

/*演示用，请勿引入项目中*/

*{margin:0; padding: 0;}

body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}

.example{padding: 20px;}

.example p{margin: 20px 0;}

a{display: inline-block; background: #61B3E6; color:#fff; padding: 0 15px; border-radius: 6px; text-align: center;

margin: 0 8px; line-height: 25px; font-size: 20px; text-decoration: none;}

a.btn-warn{background: #F0AD4E;}

a:hover{opacity: 0.8;}

/*核心css*/

.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%;

height: 100%; z-index: 998; display: none;}

.wxtip-icon{width: 52px; height: 67px; background: url(http://img.caibaojian/uploads/2016/01/weixin-

tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}

.wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}

下面分享下邵先森使用的源代码：

你的标题

/*演示用，请勿引入项目中*/

*{margin:0;padding:0;}

body{font:normal14px/1.5Arial,MicrosoftYahei;color:#333;}

.example{padding:20px;}

.examplep{margin:20px0;}

a{display:inline-block;background:#61B3E6; color:#fff; padding: 0 15px; border-radius: 6px; text-align: center;

margin:08px;line-height:25px;font-size:20px;text-decoration:none;}

a.btn-warn{background:#F0AD4E;}

a:hover{opacity:0.8;}

/*核心css*/

.wxtip{background:rgba(0,0,0,0.8);text-align:center;position:fixed;left:0;top:0;width:100%;

height:100%;z-index:998;display:none;}

.wxtip-icon{width:52px;height:67px;background:url(http://img.caibaojian/uploads/2016/01/weixin-

tip.png)no-repeat;display:block;position:absolute;right:30px;top:20px;}

.wxtip-txt{padding-top:107px;color:#fff; font-size: 16px; line-height: 1.5;}

点击右上角选择在浏览器中打开

function weixinTip(ele){

var ua = navigator.userAgent;

var isWeixin = !!/MicroMessenger/i.test(ua);

if(isWeixin){

ele.οnclick=function(e){

window.event? window.event.returnValue = false : e.preventDefault();

document.getElementById('JweixinTip').style.display='block';

}

document.getElementById('JweixinTip').οnclick=function(){

this.style.display='none';

}

var btn1 = document.getElementById('YUEZEYI1');//1

weixinTip(btn1);

var btn2 = document.getElementById('YUEZEYI2'); //2

weixinTip(btn2);

点击右上角选择在浏览器中打开

functionweixinTip(ele){

varua=navigator.userAgent;

varisWeixin=!!/MicroMessenger/i.test(ua);

if(isWeixin){

ele.οnclick=function(e){

window.event?window.event.returnValue=false:e.preventDefault();

document.getElementById('JweixinTip').style.display='block';

}

document.getElementById('JweixinTip').οnclick=function(){

this.style.display='none';

}

varbtn1=document.getElementById('YUEZEYI1');//1

weixinTip(btn1);

varbtn2=document.getElementById('YUEZEYI2');//2

weixinTip(btn2);

判断那种系统而强制手机端打开：

这种方法不仅可以实现微信端打开提示使用手机默认浏览器而且会判断是那种系统而去强制某种系统打开！

实现思路:

1.在页面加载的时候去判断是否在微信浏览器里面，如果是就弹出模态框图片提示用户跳去浏览器下载

var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

if (ua.match(/MicroMessenger/i) == "micromessenger") {

// 弹出模态框提示用户

document.getElementById('download-modal').style.visibility = "visible";

}

varua=navigator.userAgent.toLowerCase();//获取判断用的对象

if(ua.match(/MicroMessenger/i)=="micromessenger"){

// 弹出模态框提示用户

document.getElementById('download-modal').style.visibility="visible";

}

2.判断是否哪种系统(android,ios)

最后附上源代码：// 判断系统客户端

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if(isAndroid == true){

// alert('Android!');

window.location = 'android.apk';

}

else {

if(isiOS == true){

// alert('ios！');

window.location = 'https://itunes.apple/';

}else{

alert('请在手机端打开');

}

最后附上源代码：// 判断系统客户端

varu=navigator.userAgent;

varisAndroid=u.indexOf('Android')>-1||u.indexOf('Adr')>-1;//android终端

varisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端

if(isAndroid==true){

// alert('Android!');

window.location='android.apk';

}

else{

if(isiOS==true){

// alert('ios！');

window.location='https://itunes.apple/';

}else{

alert('请在手机端打开');

}

最后附上源代码：

function down(){

// 判断是否微信浏览器

var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

if (ua.match(/MicroMessenger/i) == "micromessenger") {

// 弹出模态框提示用户

document.getElementById('download-modal').style.visibility = "visible";

}else{

// 判断系统客户端

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if(isAndroid == true){

// alert('Android!');

window.location = 'litme.apk';

}

else {

if(isiOS == true){

// alert('ios！');

window.location = 'https://itunes.apple/';

}else{

alert('请在手机端打开');

}

function closeModal(){

var modal = document.getElementById('download-modal');

modal.style.visibility = "hidden";

}

.download-modal{

visibility: hidden;

width: 100%;

height: 100%;

opacity: 0.5;

position: absolute;

text-align: center;

background-color:rgb(30,30,30);

top: 0;

left: 0;

z-index: 9999;

}

.download-modal-mess{

}

#jump-to-browser{

width: 90%;

}

<scripttype="text/javascript">

functiondown(){

// 判断是否微信浏览器

varua=navigator.userAgent.toLowerCase();//获取判断用的对象

if(ua.match(/MicroMessenger/i)=="micromessenger"){

// 弹出模态框提示用户

document.getElementById('download-modal').style.visibility="visible";

}else{

// 判断系统客户端

varu=navigator.userAgent;

varisAndroid=u.indexOf('Android')>-1||u.indexOf('Adr')>-1;//android终端

varisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端

if(isAndroid==true){

// alert('Android!');

window.location='litme.apk';

}

else{

if(isiOS==true){

// alert('ios！');

window.location='https://itunes.apple/';

}else{

alert('请在手机端打开');

}

functioncloseModal(){

varmodal=document.getElementById('download-modal');

modal.style.visibility="hidden";

}

.download-modal{

visibility:hidden;

width:100%;

height:100%;

opacity:0.5;

position:absolute;

text-align:center;

background-color:rgb(30,30,30);

top:0;

left:0;

z-index:9999;

}

.download-modal-mess{

}

#jump-to-browser{

width:90%;

}

本文标签：跳转浏览器提示代码手机

版权声明：本文标题：微信跳转浏览器html5,微信跳转浏览器或提示手机端打开HTML代码最新内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1723899878h745215.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

发表评论

全部评论 0

暂无评论

技术交流 – FreeNAS中文网

微信跳转浏览器html5,微信跳转浏览器或提示手机端打开HTML代码 最新

更多相关文章

手机进水声音变小怎么办

移动端浏览器UA大全：开发者必备的模拟神器

安卓手机termux安装ubuntu24桌面环境

selenium控制已经打开的chrome浏览器

win7系统提示0x80070035找不到网络路径

苹果手机windows系统虚拟机

edge不能打开html网页,Win10系统edge浏览器无法打开网页的解决方法

苹果手机ios系统下载了.apk文件程序怎么安装？

荣耀电脑管家，非荣耀电脑安装荣耀电脑管家，和荣耀手机无缝协同！

报错解决——苹果电脑mac装windows10，总是提示“启动转换”安装失败：拷贝Windows安装文件时出错

安装系统时，提示无法安装到这个磁盘，选中的磁盘具有MBR分区表，在EFI系统上，windows只能安装到GPT磁盘的问题

Windows提示无法访问指定设备、路径或文件该怎么办？

windows7 文件夹提示“您当前无权访问该文件夹”的解决方法

[安卓手机安装Apk ] 安卓手机通过数据线在电脑下载本地的Apk应用

怎样用计算机进入手机驱动程序,手机驱动怎么安装？

Navidrome音乐服务器 + 音流APP = 释放你的手机空间

Android手机App安全漏洞整理

金山文档手机app服务器异常,为什么我的手机看不了金山文档 看不了金山文档怎么办...

网站跳转第三方QQ、微信登陆

Windows Vista, Windows 7, Snipping tool 无法工作，提示需要从新启动电脑

发表评论

推荐文章

移动硬盘上安装WIN7 WIN10系统

VMware虚拟机安装Wind10

【多图超详细】从零开始安装配置Cuckoo sandbox并提交样本进行分析

动手实现天气预报App(三)——切换城市手动更新+后台服务自动刷新

让Windows 7提供WiFi热点给iOS设备（使用无线承载网络）

热门文章

SQL Server错误代码及解释（留着备用）

mac连接群晖的服务器会自动断开_白群晖和黑群晖对比那个好?老司机给你详细讲解...

百度网盘东西没了 然后被塞满了动作片

实现playfair（多字母替代密码）加密与解密程序

最新ChatGPT网站AI系统源码+详细图文搭建教程支持GPT4.0AI绘画H5端Prompt知识库

演示：如何利用windows7远程关闭他人计算机（windows7）

Y9000P24款 win11+ubuntu20.04 双系统教程

windows上安装配置openSSH服务

win7电脑一开机就弹出“便筏已损坏”的解决办法

解决Windows 7报错问题

最新文章

Raid技术

LSI_阵列卡操作手册

破解Centos7_root用户密码

Redhat重置Root用户密码方法

远程批量修改linux服务器密码的脚本

Windows7 系统安全设置权限技巧

（Windows系统）详细介绍Windows系统 含有英文版

最新Windows 11教育版下载：专为教育设计的系统！

Win7系统下搭建NFS服务器

零基础使用UltraISO制作并安装纯净Win10系统指南

微信跳转浏览器html5,微信跳转浏览器或提示手机端打开HTML代码最新

金山文档手机app服务器异常,为什么我的手机看不了金山文档看不了金山文档怎么办...

百度网盘东西没了然后被塞满了动作片

（Windows系统）详细介绍Windows系统含有英文版