I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday, we learned BOM location object and URL interface based on search. Today is mainly about learning BOM Navigator objects based on search, another good day to learn, go, small and ！！！！

what

The Navigator interface represents the status and identity of the user agent. It allows scripts to query it and register themselves for some activities.

You can retrieve the Navigator object using the read-only window.navigator property.


attribute

Not from NavigatorID, NavigatorLanguage, NavigatorOnLine, NavigatorGeolocation, NavigatorPlugins, NavigatorUserMedia, And NetworkInformation, but implements the following properties defined in these objects.

Attribute quick reference

The property name Attributes that
Navigator.activeVRDisplays read-only Filter all VRDisplay objects and return all VRDisplay. Ispresenting objects that have a value of true as an array.
NavigatorID.appCodeName read-only Returns the internal development code name of the current browser. There is no guarantee that the value returned by this property is correct.
NavigatorID.appName read-only Return the official browser name as DOMString. There is no guarantee that the value returned by this property is correct.
NavigatorID.appVersion read-only Return the browser version as a DOMString. There is no guarantee that the value returned by this property is correct.
Navigator.battery read-only Returns a BatteryManager object that you can use to get some information about the status of the battery.
Navigator.connection read-only Provides a NetworkInformation object to obtain network connection information for a device.
Navigator.cookieEnabled read-only Return false if cookie is ignored, true otherwise
Navigator.geolocation read-only Returns a Geolocation object that contains information about the location of the geocason that can be accessed.
NavigatorConcurrentHardware.hardwareConcurrency read-only Returns the number of available logical processor cores.
NavigatorPlugins.javaEnabled read-only Returns Boolean indicating whether the browser supports Java.
Navigator.keyboard read-only Returns a keyboard object that provides access to functions that retrieve the keyboard layout diagram from the physical keyboard and toggle key capture.
NavigatorLanguage.language read-only The return DOMString represents the user’s first language, usually the language of the browser user interface. Null is returned when unknown.
NavigatorLanguage.languages read-only Returns an array of DomStrings representing languages known to the user, in order of precedence.
NavigatorPlugins.mimeTypes read-only , Navigator.locks read-only Returns a LockManager object that provides methods for requesting new lock objects and querying existing lock objects
Navigator.mediaCapabilities read-only Returns the MediaCapabilities object, which exposes information about the decoding and encoding capabilities of a given format and output capabilities.
Navigator.maxTouchPoints read-only Returns the maximum number of simultaneous touchpoints supported by the current device. Returns a MimeTypeArray array that lists the MIME types supported by the browser.
NavigatorOnLine.onLine read-only Return Boolean to indicate whether the browser is networked.
Navigator.oscpu Returns the current operating system name.
Navigator.permissions read-only Returns a Permissions object that can be used to query and update the Permissions status of the apis covered by the Permissions API.
NavigatorID.platform read-only Returns the browser platform name, not sure if this value is valid.
NavigatorPlugins.plugins read-only Returns the PluginArray array to list the plugins installed by the browser.
NavigatorID.product read-only Only ‘Gecko’ is returned in any browser. This property is used for compatibility purposes only.
Navigator.serviceWorker read-only Return the ServiceWorkerContainer object that provides registration, deletion, updating, and communication between ServiceWorker objects for associated documents.
NavigatorStorage.storage read-only Returns the Singleton StorageManager object, which is used to manage persistence permissions and estimate available storage space by site/application.
NavigatorID.userAgent read-only Returns the user agent for the current browser.

Common Attributes

Navigator.userAgent

The navigator.userAgent property returns the browser’s User Agent string, representing the browser’s vendor and version information.

Browser identification based on detecting user Agent strings is unreliable and not recommended because user Agent strings are configurable. Such as:

var ua = navigator.userAgent;
Copy the code

There is no uniform format for this string, nor can it guarantee its applicability in the future, as various Internet devices emerge endlessly.

As a result, it is no longer common to use it to identify browsers, but rather to use a “feature recognition” approach, which tests whether the current browser supports the JavaScript functionality being used.

However, userAgent can identify mobile browsers roughly accurately by testing for mobi strings.

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // Mobile browser
} else {
 // Non-mobile browser } Copy the code

If you want to recognize browsers on all mobile devices, you can test more character strings.

/mobi|android|touch|mini/i.test(ua)
Copy the code

Navigator.plugins

The navigator.plugins property returns an array-like object whose members are Plugin instance objects that represent browser installed plug-ins such as Flash, ActiveX, and so on.

var plugins = navigator.plugins
Copy the code

Navigator.platform

Returns a string representing the type of system platform on which the browser is located.

Platform may be: “Win32”, “Linux I686 “, “MacPPC”, “MacIntel”, etc.

platform = navigator.platform 
Copy the code

Navigator.onLine

Returns the networking status of the browser. Return true for normal networking (online) and false for abnormal networking (offline).

The value of this property changes whenever the browser’s networking status changes.

This property is set to false if the browser is not connected to the Internet when the user clicks on a link or script to make a web request.

Browsers implement this property somewhat differently.

In Chrome and Safari, if the browser is not connected to a local area network (LAN) or router, it is offline. Otherwise, it is online.

  • When the property value isfalse“You can say the browser isn’t connected properly,
  • However, if this property is true, it does not mean that the browser can connect to the Internet.

There are other reasons for misjudgment, such as the fact that your computer has virtualization software installed and may have a virtual network card, which always shows that it is connected properly.

online = window.navigator.onLine;
Copy the code

If you want to know exactly how your browser is connected, you should use additional checks.

In Firefox and Internet Explorer, false is returned if the browser is “working offline”.

Before Firefox 41, all other conditions return true; Testing actual behavior on Nightly 68 on Windows shows that it only looks for LAN connections like Chrome and Safari, resulting in false positives.

You can listen for events on window.ononline and window.onoffline to detect changes in browser networking status.

window.addEventListener("offline".function(e) {alert("offline"); })
window.addEventListener("online".function(e) {alert("online"); })Copy the code

Navigator.language

NavigatorLanguage. Language read-only property returns a string, a user preference language usually refers to the language of the browser UI.

let lang = navigator.language;
Copy the code

A DOMString. Lang stores a string representing the language version (defined in BCP 47). Valid languages include “zh-cn”, “en”, “en-us”, “FR”, and “es-es”.

Note that Safari on macOS and iOS (pre-10.2) has lower case country codes: “zh-cn”, “en-us”, “FR-fr”, etc.

Navigator.languages

Read-only property NavigatorLanguage. Languages returns a DOMString array, the array content presentation language used by site visitors.

The HTTP protocol header accept-language from the user’s browser on every HTTP request uses the same Language value from the navigator.languages attribute, except for the special qvalues field (e.g. En-us; Q = 0.8).

preferredLanguages = globalObj.navigator.languages
Copy the code

Navigator.geolocation

The navigator. geolocation read-only property returns a Geolocation object from which device location information can be accessed.

Enable websites or applications to provide personalized results based on the user’s location.

Note that this API is only available under the HTTPS protocol, otherwise the following method will be called with an error.

navigator.geolocation
Copy the code

The Geolocation object provides the following three methods.

  • Geolocation.getCurrentPosition(): Gets the current location of the user
  • Geolocation.watchPosition(): Monitors user position changes
  • Geolocation.clearWatch()Cancelled:watchPosition()Method specifies the listener function

Notice that when these three methods are called, the browser pops up with a dialog asking the user for authorization.

For security reasons, users are prompted to authorize when a web page requests their location information. Note that different browsers have different policies and methods for requesting permissions. Windows10 cannot obtain location without enabling location

Navigator.cookieEnabled

Navigator. CookieEnabled returns a Boolean value indicating whether cookies are enabled on the current page. This property is read-only.

let cookieEnabled = navigator.cookieEnabled;
Copy the code

Note that this property reflects the general nature of the browser, not whether it stores cookies for a specific website.

The user can set a site not to store cookies, and the cookieEnabled returns True.

methods

Navigator.javaEnabled()

The navigator.javaEnabled () method returns a Boolean value indicating whether the browser can run Java applets.

navigator.javaEnabled()
Copy the code

NavigatorUserMedia.getUserMedia()

MediaDevices. GetUserMedia () will prompt the user for permission to use the media input media input will produce a MediaStream, containing the request of the orbit of media types.

This stream can contain A video track (from hardware or virtual video sources, such as cameras, video capture devices, screen sharing services, and so on), an audio track (also from hardware or virtual audio sources, such as microphones, A/D converters, and so on), or some other track type.

It returns a Promise object, and on success resolve calls back a MediaStream object. If the user denies permission, or if the desired media source is not available, Promise calls back a PermissionDeniedError or NotFoundError.

Usually you can use navigator. MediaDevices to get mediaDevices, for example


const constraints = {
  audio: true.  video: { width: 1280.height: 720 }
};
const mPromise = navigator.mediaDevices.getUserMedia(constraints);  Copy the code

navigator.registerProtocolHandler()

The Navigator method registerProtocolHandler() lets the Web site register itself to open or handle specific URL schemes (AKA Protocols).

For example, this API can cause an E-mail site to open the URL of the Mailto: class, or a VoIP site to open the URL of the tel: class.

navigator.registerProtocolHandler(scheme, url, title);

navigator.registerProtocolHandler("web+burger".                                  "https://jsconsole.com/?uri=%s".                                  "Burger handler");
Copy the code

This creates a handler that allows users to be directed to your Web application with a Web + Burger :// link, and inserts burger information into the link specified by the handler.

To reiterate, the script must run in the same domain (in this case, all jsconsole.com pages) and the second argument must be a link that begins with either the “HTTP” or “HTTPS” protocol flag (in this case, HTTPS).

The user will be told that your code is requesting registration with the protocol handler, so they can choose to allow or deny it

Allowed protocol flags

For security reasons, registerProtocolHandler() strictly limits the protocol tokens allowed for registration.

You can register a custom markup protocol with web+ as a prefix, which must be at least 5 characters long (including the Web + prefix), and use only lowercase ASCII characters as names. For example, Web + Burger, as shown in the following example.

In addition, you can use protocol tokens from the whitelist listed below:

  • bitcoin
  • geo
  • im
  • irc
  • ircs
  • magnet
  • mailto
  • mms
  • news
  • nntp
  • openpgp4fpr
  • sip
  • sms
  • smsto

Summary of today’s lesson


Today the mood

Today I will learn BOM Navigator objects based on search. I hope to learn more tomorrow ~~~~


This article is formatted using MDNICE