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

jsliang 发布于2019-08-19 17:30 / 3231人阅读

摘要：前言昨天博客接入了评论系统，使用的是国内的多说。问题多说如何显示浏览器和系统的信息解决方法经过查找，利用可以实现。如自定义显示颜色请加相关名称注意大小写。引入的库文件必须在多说之后。推荐加载多说代码中效果图原文来自前端博客

前言

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

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

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

问题

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

解决方法

经过查找，利用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的下面。

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

正常加载使用这段代码：

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

3. 引入ua-parser.js库

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

要先引入jquery库文件。

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

推荐加载多说js代码中：

效果图

原文来自：seay前端博客

云服务器 GPU云服务器 sdk和浏览器使用webrtc通信系统版本信息可以使用多说 webrtc浏览器显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78585.html

多说自定义CSS动感头像和多说评论显示User Agent的那些小事

摘要：之前看到很多朋友自豪的使用时会选择多说作为第三方评论插件，民间的高手们也根据官方的开发出一些十分有趣的隐藏属性。 showImg(https://segmentfault.com/img/remote/1460000004879308); 前言多说是一款社会化评论系统，她改变了网站与用户之间，用户与用户之间的互动方式。当然Disqus在大家心目中可能更加具有影响力，而我选择多说的...

beanlam 2019-08-28 18:09 评论0 收藏0
多说自定义CSS动感头像和多说评论显示User Agent的那些小事

摘要：之前看到很多朋友自豪的使用时会选择多说作为第三方评论插件，民间的高手们也根据官方的开发出一些十分有趣的隐藏属性。 showImg(https://segmentfault.com/img/remote/1460000004879308); 前言多说是一款社会化评论系统，她改变了网站与用户之间，用户与用户之间的互动方式。当然Disqus在大家心目中可能更加具有影响力，而我选择多说的...

novo 2019-08-01 14:46 评论0 收藏0
每周下载数百万次!恶意软件包感染Linux和Windows设备引发供应链攻击

摘要：据开发者称，他的帐户被劫持并用于部署该库的三个恶意版本。报告指出，恶意软件包被称为编目为以及和编目为。研究人员无法完全确定恶意行为者计划如何针对开发人员。月份网络攻击者对进行了加密挖掘攻击月份发现了加密挖掘恶意软件。 UA-Parser-JS 项目被劫持安装恶意软件 10月22日，攻击者发布了恶意版本的UA-Parser-JS NPM库，以在Linux和Windows设备上安装加...

姘搁『 2021-10-27 14:14 评论0 收藏0
Hexo折腾记

摘要：前言博主之前也有折腾和可对于一个前端来说，让人没法尽兴，因为不知道该如何添加自己的代码。下面记录博主搭建的整个过程。若这两个条件满足，则创建一个目录的。如果时间可以静止，我希望就停在此刻。前言博主之前也有折腾wordpress和jekyll可对于一个前端er来说，wordpress让人没法尽兴，因为不知道该如何添加自己的代码。而jekyll就太麻烦了每一次都需要重新提交，而且样式...

RaoMeng 2019-08-20 10:49 评论0 收藏0
获取多说和 Disqus 文章评论数的方法

摘要：不少网站使用的是多说等第三方评论系统，有时候需要在特定位置显示对应文章的评论数，下面的方法可以快速获取多说和的文章评论数，所得为纯数字，方便排版布局。不少网站使用的是多说等第三方评论系统，有时候需要在特定位置显示对应文章的评论数，下面的方法可以快速获取多说和 Disqus 的文章评论数，所得为纯数字，方便排版布局。showImg(http://static.xiaomo.info/i...

simon_chen 2019-08-19 18:34 评论0 收藏0