JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码

随着html5网页技术的日益发展，越来越多的网站都喜欢做成PC和WAP同源码的响应式模板，这样的模板有非常大的优势，代码不紧凑无需多终端多代码，同一段代码可以适应全部终端，但是同时也带来了一些小的问题，例如如果想投放一段广告，该广告只想在PC端显示而WAP端不显示，或者只想WAP端显示PC端不显示该如何处理呢？前面361模板给大家介绍过CSS的一个这样的应用《如何用CSS实现PC端显示 手机端隐藏代码效果》，今天361模板给大家带来JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码。

代码如下：

<script>var url = location.search;url = url.substr(1);var bs={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.indexOf('Android') > -1 || u.indexOf('Linux') > -1, iPhone: u.indexOf('iPhone') > -1,iPad: u.indexOf('iPad') > -1         };}(),language:(navigator.browserLanguage || navigator.language).toLowerCase()} var flag = true;if(bs.versions.mobile && url!='mobile'){if(bs.versions.android||bs.versions.iPhone||bs.versions.iPad||bs.versions.ios){flag=false;}}if(flag){/*pc广告代码*/document.writeln("<script src=/"//js//1.js/"><//script>");}else{/*移动广告代码*/document.writeln("<script language=JavaScript src=/"//222.js/"><//script>");}</script>

上面的代码我们首先把PC广告代码放到1.js里，移动端广告代码放到222.js中，这样就可以实现不同终端出现不同的广告了。