BrowserDOM
Get browser environment info and print it in the DOM.
Getting Started
Installation
- Download the script and add it to the head
- Get it from a CDN
- Install it with NPM and import in your JS file
npm install --save-dev browserdom
Create a new instance
- Import it:
;
- Create a new instance passing your required options:
const myBrowserDOM = browser: true scrollPercentage: true;
<html>
tag, or get the info to use it in your JS
Print the data in the document
window
Methods
With print() method you write all your enabled options as a data-attribute in the <html>
tag.
Example:
- index.js
const myBrowserDOM = browser: true touchDevice: true; document
- Output HTML
get
With get() method you can get all the BrowserDOM object or pass one option as argument to retrieve it.
Example 1:
- index.js
const myBrowserDOM = browser: true touchDevice: true; document
- Output JSON
browser: chrome touchDevice: false
Example 2:
- index.js
const myBrowserDOM = browser: true touchDevice: true; document
- Output
chrome
Options
These 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 thescrolledTrigger
number [false]scrolledTrigger
: {number} The scroll position wherescrolled
change totrue
[1]scrollDirection
: {string} If last scroll is todown
or toup
[false]. If is on top showstop
.scrollPosition
: {boolean} The scroll position [false]scrollPercentage
: {boolean} The page scroll percentage [false]
Returned values
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}
Changelog
See CHANGELOG.md
Credits
Developed by Iván Barcia
Project tested on BrowserStack
License
This project is under MIT License