多说使用ua-parser-js显示浏览器和系统信息

前言

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

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

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

问题

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

解决方法

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

步骤

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;}
.this_ua.platform.Windows{background-color: #39b3d7!important;border-color: #46b8da!important;}
.this_ua.platform.Linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;}
.this_ua.platform.Android {background-color: #00C47D!important;border-color: #01B171!important;}
.this_ua.browser.Chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;}
.this_ua.browser.Firefox{background-color: #f0ad4e!important;border-color: #eea236!important;}
.this_ua.browser.IE{background-color: #428bca!important;border-color: #357ebd!important;}
.this_ua.browser.Opera{background-color: #d9534f!important;border-color: #d43f3a!important;}

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

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

2. 添加js代码

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

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

正常加载使用这段代码:

<script type="text/javascript">
  if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp();
  else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp;
  function hookDUOSHUO_tp(){
      var _D_post=DUOSHUO.templates.post
      DUOSHUO.templates.post=function (e,t){
          var rs=_D_post(e,t);
          if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
          return rs;
      }
  }
  function show_ua(string){
      $.ua.set(string);
      var sua=$.ua;
      if(sua.os.version=='x86_64')sua.os.version='x64';
      return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
  }
  </script>

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

<script type="text/javascript">
  if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp();
  else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp;
  var hookDUOSHUO_bl=false;
  function hookDUOSHUO_tp(){
      if(hookDUOSHUO_bl)return;
      else hookDUOSHUO_bl=true;
      var _D_post=DUOSHUO.templates.post;
      DUOSHUO.templates.post=function (e,t){
          var rs=_D_post(e,t);
          if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
          return rs;
      }
  }
  function show_ua(string){
      $.ua.set(string);
      var sua=$.ua;
      if(sua.os.version=='x86_64')sua.os.version='x64';
      return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
  }
  </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代码中:

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

效果图

效果图

原文来自:seay前端博客


seay
个人学习笔记
767 声望
32 粉丝
0 条评论
推荐阅读
在 Windows Forms 和 WPF 应用中使用 FontAwesome 图标
FontAwesome 大家都不陌生,精美的图标,出现在各式各样的网页中。最近在做 Windows Forms 应用程序,要求美观,就想能不能把 FontAwesome 图标用上,于是就有了本文。

Seay阅读 3.2k评论 4

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.4k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

767 声望
32 粉丝
宣传栏