JS实现PC、移动端与微信端差异化广告展示方案

作者:函数茶馆时间:2026-10-26 10:14:13浏览:488

本文介绍如何利用JavaScript判断用户终端类型,实现PC端、移动端及微信端展示不同广告代码的功能。通过检测User-Agent区分设备,定义数组存储各端广告内容,并在非爬虫环境下动态输出对应广告,确保不同客户端获得精准的广告展示。

核心实现逻辑如下:首先通过正则表达式检测用户代理(User-Agent)以识别是否为爬虫、移动设备或微信客户端。接着定义三个数组分别存储PC端、移动端和微信端的广告代码片段。若检测到移动设备,则用移动端广告覆盖PC端广告配置。最后定义一个输出函数,在排除爬虫访问后,根据传入的ID动态写入对应的广告代码。

var IsSpider=/spider|bot/ig.test(window.navigator.userAgent);
var IsMobile=/ipad|iphone|ipod|android|mobile/ig.test(window.navigator.userAgent);
var IsWeixin=/micromessenger/i.test(window.navigator.userAgent);

var i;
web=[];
mob=[];
wex=[];
// 提问头部
web['single_question_banner']='pc端广告代码';
mob['single_question_banner']='移动端广告代码';
wex['single_question_banner']='微信端广告代码';
// 标题头部
web['single_question_bottom']='';
mob['single_question_bottom']='';
wex['single_question_bottom']='';

if (IsMobile) {
	for (i in web) {
	  web[i] = mob[i];
	}
}

function growing(id) {
    if(IsSpider)return;
    document.writeln(web[id]);
}

具体代码实现较为直观,主要依赖数组来定义和管理不同客户端的广告内容。开发者可根据实际需求参考上述逻辑自行调整广告代码的插入方式。

关于如何在JS中实现仅在PC端显示广告而移动端不显示(或显示不同内容)的功能,关键在于对终端类型的准确判断。通过上述User-Agent检测机制,可以精准区分访问来源,从而控制广告代码的输出逻辑,确保移动端用户不会看到仅适用于PC端的广告布局或内容。


var browser={    
		versions:function(){            
				var u = navigator.userAgent, app = navigator.appVersion;            
				return {                
					trident: u.indexOf('Trident') > -1,               
					presto: u.indexOf('Presto') > -1,                
					webKit: u.indexOf('AppleWebKit') > -1,              
					gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,               
					mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),          
					ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),                 
					android: u.toLowerCase().indexOf('android') > -1 ,   
					iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,               
					iPad: u.indexOf('iPad') > -1,               
					webApp: u.indexOf('Safari') == -1           
				};
				}()
}
if (!(browser.versions.android || browser.versions.ios || browser.versions.iPhone || browser.versions.iPad)){
 
document.writeln("<div class=\'float_layer\' id=\'miaov_float_layer\' style=\'z-index:10001;\'>");
document.writeln("    <div class=\'content\'>");
document.writeln("        <div class=\'wrap\'> ");
document.writeln("        <a href=\'http://yookee.cc/\' target=\'_blank\'><img src=\'/ad1/14690989051188.gif\' width=\'300\' height=\'250\' /></a>");
document.writeln("        </div>");
document.writeln("    </div>");
document.writeln("</div>");
}

至此,关于利用JS实现PC端、移动端及微信端差异化广告展示的技术方案已介绍完毕。如需了解更多相关技术细节,建议查阅本站过往文章或继续浏览后续相关内容,感谢支持。

作者最新文章