http+js智能判断客户端并显示不同内容

作者 : 星辰 本文共1132个字,预计阅读时间需要3分钟 发布时间: 2020-09-1 共216人阅读

通过http+js代码实现智能判断pc端,手机端(苹果,安卓)并根据不同的客户端显示不同的内容!目前用电脑上的浏览器,android 设备,iphone,ipad 均做过测试,此代码可行,各设备判断均正确,喜欢的同学可以来看看哦!

教程

以下html代码加入网页的<body></body>之间

<div class="download link" id="downloadSHY">
	<a href="苹果端链接" id="iosdown" style="display:none">
		立即下载
	</a>
	<a href="安卓端链接" id="androiddown" style="display:none">
		立即下载
	</a>
	<a href="pc端链接" id="pcdown" style="display:none">
		立即下载
	</a>
</div>

紧随其后加入以下JS代码:

<script type="text/javascript">
$(function() {
	var mobile_flag = isMobile();
	// console.log(mobile_flag);
	if(mobile_flag == false){
		$("#phoneOrWeb").show();
		$('#pcdown').show();
	}else if(mobile_flag == 'iPhone'){
		$('#ios').show();
		$('#iosdown').show();
	}else{
		$('#android').show();
		$('#androiddown').show();
    }
});
function isMobile() {
	var userAgentInfo = navigator.userAgent;
    var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
    var mobile_flag = false;
    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
    	if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
    		mobile_flag = mobileAgents[v];
    		break;
    	}
    }
    return mobile_flag;
}
</script>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

本篇文章就是关于http+js智能判断客户端并显示不同内容的教程,上述内容非常浅显易懂,希望对需要的朋友有所帮助!

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.vfaner.com",如遇到无法解压的请联系管理员!

微范儿 » http+js智能判断客户端并显示不同内容

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
需要帮助?
加官方群:71622543,即可向管理员或者群员咨询,看到第一时间回复
×
开通VIP 享更多特权,建议使用QQ登录