前端：根据用户的平台提示信息-优快云博客

本文介绍了一种根据用户使用的平台（如微信、iOS、Android等）进行页面跳转和提示的方法。通过JavaScript判断用户代理，并根据不同的设备类型显示相应的下载链接或提示信息。

2019独角兽企业重金招聘Python工程师标准>>>

有时候，因为页面必须由指定打开方式打开才能正常工作，所以页面需要根据用户的平台（打开方式）进行提示信息，引导用户正确打开。简单代码如下：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>根据平台提示</title>
<script type="text/javascript" src="http://www.gcu.edu.cn/js/jquery-1.9.1.min.js"></script>

</head>

<body>
	<style type="text/css">
	*{margin:0; padding:0;}
	img{max-width: 100%; height: auto;}
	</style>
	<div id="app_list" style="display:none">
		抱歉，暂不支持您的系统，如需下载，请点击下面的链接
		<ul>
			<li><a href="http://_V2_3_0.apk">android版下载地址</a></li>
			<li><a href="https://">iPhone版下载地址</a></li>
		</ul>
	</div>

<script language="JavaScript" type="text/javascript">
	var href = '/';
	function redirect(){
		location.href = href;
	}
	function loadHtml(){
			var div = document.createElement('div');
			div.id = 'weixin-tip';
			div.innerHTML = '<p><img src="live_weixin.png" alt="微信打开"/></p>';
			document.body.appendChild(div);
		}
		
	function loadStyleText(cssText) {
		var style = document.createElement('style');
		style.rel = 'stylesheet';
		style.type = 'text/css';
		try {
			style.appendChild(document.createTextNode(cssText));
		} catch (e) {
			style.styleSheet.cssText = cssText; //ie9以下
		}
		var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式
		head.appendChild(style); 
	}	
	$(document).ready(function(){
		var ua = navigator.userAgent.toLowerCase();	
		var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}";		
		if (ua.match(/MicroMessenger/i) == "micromessenger"){
			loadHtml();
			loadStyleText(cssText);
		}
		if (/iphone|ipad|ipod/.test(ua)) {
			href = 'https://itunes.apple.com/us/app//id912776783?l=zh&ls=1&mt=8';
			redirect();
		} else if (/android/.test(ua)) {
				href = 'http://www.cn/app/SmartCampus_V2_3_0.apk';
				redirect();

		} else if (/windows phone|blackberry/.test(ua)) {
			alert('抱歉，暂不支持您的系统');
		} else {
			$('#app_list').show();
		}
	});

</script>
</body>
</html>

转载于:https://my.oschina.net/wtzheng/blog/759929