你的位置:首页 > Java教程

[Java教程]多说使用ua


前言

昨天博客接入了评论系统,使用的是国内的多说。

之前看到过有些利用该评论系统的有浏览器和系统信息的显示,感觉很不错。

所以,也想有这样的效果。

问题

多说如何显示浏览器和系统的信息?

解决方法

经过查找,利用UAParser.js可以实现。

步骤

1. 添加样式

1 span.this_ua {background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;border: 1px solid #BBB!important;color: #fff;}2 .this_ua.platform.Windows{background-color: #39b3d7!important;border-color: #46b8da!important;}3 .this_ua.platform.Linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;}4 .this_ua.platform.Android {background-color: #00C47D!important;border-color: #01B171!important;}5 .this_ua.browser.Chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;}6 .this_ua.browser.Firefox{background-color: #f0ad4e!important;border-color: #eea236!important;}7 .this_ua.browser.IE{background-color: #428bca!important;border-color: #357ebd!important;}8 .this_ua.browser.Opera{background-color: #d9534f!important;border-color: #d43f3a!important;}

可以新建一个css文件,在页面中添加引用。

如自定义显示颜色css请加.this_ua.platform.相关名称(注意大小写)。

2. 添加js代码

这段代码最好放在多说js代码之后,可以放在多说js的下面。

下面两段代码根据需要选择。

正常加载使用这段代码:

 1 <script type="text/javascript"> 2  if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp(); 3  else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp; 4  function hookDUOSHUO_tp(){ 5    var _D_post=DUOSHUO.templates.post 6    DUOSHUO.templates.post=function (e,t){ 7      var rs=_D_post(e,t); 8      if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>'); 9      return rs;10    }11  }12  function show_ua(string){13    $.ua.set(string);14    var sua=$.ua;15    if(sua.os.version=='x86_64')sua.os.version='x64';16    return '<span background-color: #f5f5f5; color: #000000;">'+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span background-color: #f5f5f5; color: #000000;">'+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';17  }18  </script>

 

无刷新加载的请使用下面代码:

 1 <script type="text/javascript"> 2  if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp(); 3  else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp; 4  var hookDUOSHUO_bl=false; 5  function hookDUOSHUO_tp(){ 6    if(hookDUOSHUO_bl)return; 7    else hookDUOSHUO_bl=true; 8    var _D_post=DUOSHUO.templates.post; 9    DUOSHUO.templates.post=function (e,t){10      var rs=_D_post(e,t);11      if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');12      return rs;13    }14  }15  function show_ua(string){16    $.ua.set(string);17    var sua=$.ua;18    if(sua.os.version=='x86_64')sua.os.version='x64';19    return '<span background-color: #f5f5f5; color: #000000;">'+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span background-color: #f5f5f5; color: #000000;">'+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';20  }21  </script>

 

3. 引入ua-parser.js库

<script src="http://faisalman.github.io/ua-parser-js/src/ua-parser.js"></script>

 

可以将库文件下载到本地添加到主题中。

要先引入jquery库文件。

引入的ua-parser.js库文件必须在多说embed.js之后。

推荐加载多说js代码中:

 1 <script type="text/javascript"> 2  var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"}; 3  (function() { 4   var ds = document.createElement('script'); 5   ds.type = 'text/javascript';ds.async = true; 6   ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; 7   ds.charset = 'UTF-8'; 8   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); 9   ds = document.createElement('script');10   ds.type = 'text/javascript';ds.async = true;11   ds.src = 'http://faisalman.github.io/ua-parser-js/src/ua-parser.js';12   ds.charset = 'UTF-8';13   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);14  })();15 </script >

效果图

原文来自:seay前端博客