多說使用ua-parser-js顯示瀏覽器和系統信息

jsliang 發布于2019-08-19 17:30 / 3361人閱讀

摘要：前言昨天博客接入了評論系統，使用的是國內的多說。問題多說如何顯示瀏覽器和系統的信息解決方法經過查找，利用可以實現。如自定義顯示顏色請加相關名稱注意大小寫。引入的庫文件必須在多說之后。推薦加載多說代碼中效果圖原文來自前端博客

前言

昨天博客接入了評論系統，使用的是國內的多說。

之前看到過有些利用該評論系統的有瀏覽器和系統信息的顯示，感覺很不錯。

所以，也想有這樣的效果。

問題

多說如何顯示瀏覽器和系統的信息?

解決方法

經過查找，利用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瀏覽器顯示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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