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

一些做微信营销活动或者需要推广下载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.com/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;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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

你的标题

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

*{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.com/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;}

1

1

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

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);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

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";

}

1

2

3

4

5

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.com/';

}else{

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

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

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.com/';

}else{

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

}

}

最后附上源代码：

<script type="text/javascript">

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.com/';

}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%;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<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.com/';

}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%;

}