微信内置浏览器自动跳转其它浏览器

此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的。

安卓访问时可以直接自动跳转浏览器;IOS就复杂一点了,需要点一下然后借助手机淘宝才可以跳转。

下面是全部代码,已经做了安卓和IOS的适配。需要替换其中要跳转的网址,然后保存为php文件,在微信内访问即可实现自动跳转:

<?php
error_reporting(0);
if($_GET['open']==1 && strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger')!==false){
	header("Content-Disposition: attachment; filename=\"load.doc\"");
	header("Content-Type: application/vnd.ms-word;charset=utf-8");
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Welcome</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
	<meta content="yes" name="apple-mobile-web-app-capable"/>
	<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
	<meta name="format-detection" content="telephone=no"/>
	<meta content="false" name="twcClient" id="twcClient"/>
	<style>
	body,html{width:100%;height:100%}
	*{margin:0;padding:0}
	body{background-color:#fff}
	.top-bar-guidance{font-size:15px;color:#fff;height:40%;line-height:1.8;padding-left:20px;padding-top:20px;background:url(//gw.alicdn.com/tfs/TB1eSZaNFXXXXb.XXXXXXXXXXXX-750-234.png) center top/contain no-repeat}
	.top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}
	.app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}
</style>
</head>
<body>
	<div class="top-bar-guidance">
		<p>
			点击右上角<img src="//gw.alicdn.com/tfs/TB1xwiUNpXXXXaIXXXXXXXXXXXX-55-55.png" class="icon-safari"/> Safari打开
		</p>
		<p>
			可以继续访问本站哦~
		</p>
	</div>
	<a class="app-download-btn" id="BtnClick" href="javascript:;"> 点此继续访问 </a>
	<script>
		var url = 'http://www.youngxj.cn';//更改需要跳转的地址
		document.querySelector('body').addEventListener('touchmove', function (event) {
			event.preventDefault();
		});
		window.mobileUtil = (function(win, doc) {
			var UA = navigator.userAgent,
			isAndroid = /android|adr/gi.test(UA),
			isIOS = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,
			isBlackBerry = /BlackBerry/i.test(UA),
			isWindowPhone = /IEMobile/i.test(UA),
			isMobile = isAndroid || isIOS || isBlackBerry || isWindowPhone;
			return {
				isAndroid: isAndroid,
				isIOS: isIOS,
				isMobile: isMobile,
				isWeixin: /MicroMessenger/gi.test(UA),
				isQQ: /QQ/gi.test(UA)
			};
		})(window, document);
		if(mobileUtil.isWeixin){
			if(mobileUtil.isIOS){
				url = "https://t.asczwa.com/taobao?backurl=" + encodeURIComponent(url);
				document.getElementById('BtnClick').href=url;
			}else if(mobileUtil.isAndroid){
				url = '?open=1';
				document.getElementById('BtnClick').href=url;
				var iframe = document.createElement("iframe");
				iframe.style.display = "none";
				iframe.src = url;
				document.body.appendChild(iframe);
			}
		}else{
			document.getElementById('BtnClick').href=url;
			window.location.replace(url);
		}
	//setTimeout('WeixinJSBridge.invoke("closeWindow", {}, function(e) {})', 2000); </script>
</body>
</html>

跳转域名需要备案,具体自行测试

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

BOM

BOM 浏览器对象模型 定义了js操作浏览器的属性和方法 open(页面地址的url,打开的方式) 第一个参数,如果为空,默认打开一个空白的页码 第二个...

1441
来自专栏技术博文

Fiddler 教程

阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Fiddler如何捕获HTTPS会话 ...

5324
来自专栏前端vue

element导航问题总结

官方文档 router-link-active----激活 class 类名 router-link-exact-active----精确激活的默认的 cl...

5034
来自专栏知无涯

移动端前端开发调试-将safari设置iPhone模拟器

95211
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3324
来自专栏散尽浮华

Linux终端复用神器-Tmux使用梳理

Tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD,采用BSD授权。使用它最直观的好处就是,通过一个终端登录远程主机并运行tmu...

22210
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4216
来自专栏谈补锅

免费真机调试 -- Xcode7

  刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!...

8513
来自专栏CDA数据分析师

让你效率提高300%的Excel键盘技巧

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 刚进惠普的时候,听说公司里的某个领导操作Excel从不用鼠标,感觉真是太牛逼了,满是崇拜的眼神。然而经过...

2098
来自专栏啸天"s blog

微信内置浏览器自动跳转其它浏览器

7804

扫码关注云+社区

领取腾讯云代金券