网站目录

我爱导航

JS实现响应式模板广告切换,电脑和手机显示不同

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


  1. <script>

  2. var url = location.search;

  3. url = url.substr(1);

  4. var bs={

  5. versions:function(){

  6. var u = navigator.userAgent, app = navigator.appVersion;

  7. return {

  8. trident: u.indexOf('Trident') > -1,

  9. presto: u.indexOf('Presto') > -1,

  10. webKit: u.indexOf('AppleWebKit') > -1,

  11. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

  12. mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),

  13. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

  14. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

  15. iPhone: u.indexOf('iPhone') > -1,

  16. iPad: u.indexOf('iPad') > -1

  17. };

  18. }(),

  19. language:(navigator.browserLanguage || navigator.language).toLowerCase()

  20. }

  21. var flag = true;

  22. if(bs.versions.mobile && url!='mobile'){

  23. if(bs.versions.android||bs.versions.iPhone||bs.versions.iPad||bs.versions.ios){

  24. flag=false;

  25. }

  26. }

  27. if(flag){

  28. /*pc广告代码*/

  29. document.writeln("<script src=\"\/js\/pc广告代码.js\"><\/script>");

  30. }else{

  31. /*移动广告代码*/

  32. document.writeln("<script language=JavaScript src=\"\/移动广告代码.js\"><\/script>");

  33. }

  34. </script>



上面的代码我们首先把PC广告代码放到js里,移动端广告代码放到js中,这样就可以实现不同终端出现不同的广告了。以上就是JS实现响应式模板广告布局,电脑和手机访问显示不同广告内容代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持我爱导航网。

文章来自:我爱导航,未经允许不得转载!:我爱导航 > 教程收藏 > 建站经验 » JS实现响应式模板广告切换,电脑和手机显示不同

JS广告切换 ( )

相关推荐