Get browser environment info and print it in the DOM.
- Download the script and add it to the head
<script src="./browserdom.min.js"></script>- Get it from a CDN
<script src="https://unpkg.com/browserdom"></script>- Install it with NPM and import in your JS file
npm install --save-dev browserdom- Import it:
import BrowserDOM from 'browserdom';- Create a new instance passing your required options:
const myBrowserDOM = new BrowserDOM({
browser: true,
scrollPercentage: true
});document.addEventListener("DOMContentLoaded", function() {
myBrowserDOM.print();
})window.addEventListener("scroll", function() {
console.log(myBrowserDOM.get("scrollPercentage"));
})With print() method you write all your enabled options as a data-attribute in the <html> tag.
- index.js
const myBrowserDOM = new BrowserDOM({
browser: true,
touchDevice: true
});
document.addEventListener("DOMContentLoaded", function() {
myBrowserDOM.print();
})- Output HTML
<html data-browser="chrome" data-touchdevice="false">
<head></head>
<body></body>
</html>With get() method you can get all the BrowserDOM object or pass one option as argument to retrieve it.
- index.js
const myBrowserDOM = new BrowserDOM({
browser: true,
touchDevice: true
});
document.addEventListener("DOMContentLoaded", function() {
console.log(myBrowserDOM.get());
})- Output JSON
{
browser: chrome,
touchDevice: false
}- index.js
const myBrowserDOM = new BrowserDOM({
browser: true,
touchDevice: true
});
document.addEventListener("DOMContentLoaded", function() {
console.log(myBrowserDOM.get("browser"));
})- Output
chromeThese are all options with their default values
os: {boolean} The operating system [false]browser: {boolean} The browser name [true]version: {boolean} The browser version [false]online: {boolean} If the browser is online [false]lang: {boolean} The browser language [false]touchDevice: {boolean} If is a touch device [true]scrolled: {boolean} If is scrolled below from thescrolledTriggernumber [false]scrolledTrigger: {number} The scroll position wherescrolledchange totrue[1]scrollDirection: {string} If last scroll is todownor toup[false]. If is on top showstop.scrollPosition: {boolean} The scroll position [false]scrollPercentage: {boolean} The page scroll percentage [false]
These are all returned values if the option is enables
- os:
macos|linux|windows|ios|android - browser:
chrome|safari|firefox|edge|ie - version:
{number} - online:
{boolean} - lang:
{lang ISO code} - touchDevice:
{boolean} - scrolled:
{boolean} - scrollDirection:
down|up|top - scrollPosition:
{number} - scrollPercentage:
{number}
See CHANGELOG.md
Developed by Iván Barcia
Project tested on BrowserStack
This project is under MIT License