We program the properties of the browser window. navigator, screen, and location objects - Browser and screen resolution information - Current URL Javascript object window navigator browser name

Source: http://learn.javascript.ru/browser-objects

navigator: platform and browser

The navigator object contains general information about the browser and operating system. Two properties are especially noteworthy:

  • navigator.userAgent- contains information about the browser.
  • navigator.platform- contains information about the platform, allows you to distinguish between Windows / Linux / Mac, etc..
alert(navigator.userAgent); alert(navigator.platform);

screen

The screen object contains general information about the screen, including its resolution, color, and so on. It can be useful for determining what code is running on mobile device with low resolution.

The visitor's current horizontal/vertical screen resolution is in screen.width / screen.height .

This property can be used to collect statistical information about visitors.

The JavaScript code of the counters reads this information and sends it to the server. That is why you can view in statistics how many visitors came with which screen.

location

The location object provides information about the current URL and allows JavaScript to redirect the visitor to a different URL. The value of this property is an object of type Location .

Location methods and properties

The most important method is, of course, toString . It returns the full URL.

Code that needs to perform a string operation on location must first cast the object to a string. This is how the error will be:

// there will be an error, because location is not a string alert(window.location.indexOf("://" ));

And this is correct:

// led to the line before indexOf alert((window .location + "" ).indexOf("://" ));

All of the following properties are strings. The "Example" column contains their values ​​for the test URL:

Location Object Methods

  1. assign(url) download the document at the given url. You can also simply equate window.location.href = url .
  2. reload() reload the document at the current URL. The forceget argument is a boolean value, if it is true, then the document is always reloaded from the server, if false or not specified, then the browser can take the page from its cache.
  3. replace(url) replace the current document with the document at the specified url.
  4. toString() Returns the string representation of the URL.

If you change any properties of window.location other than hash , the document will be reloaded as if the window.location.assign() method had been called on the modified url.

You can also redirect by explicitly assigning location , for example:

// the browser will load the page http://javascript.ru window .location = "http://javascript.ru" ;

frames

A collection containing frames and iframes. You can address them both by number and by name.

frames contains window objects of child frames. The following code translates the frame to a new URL:

<iframe name="example" src="http://example.com" width="200" height="100" >iframe > <script> window.frames.example.location = "http://example.com" ;script>

history

The history object allows you to change the URL without reloading the page (within the same domain) using the History API, as well as redirect the visitor back and forth through the history.

The history object does not provide a way to read the browsing history. It is possible to send the visitor back by calling history.back() or forward by calling history.forward() , but the browser does not provide the address itself for security reasons.

Total

Browser objects:

  • navigator, screen Contains browser and screen information.
  • location Contains information about the current URL and allows you to change it. Any change other than hash will reload the page. You can also reload the page from the server by calling location.reload(true) .
  • frames Contains a collection of window objects for each of the child frames. Each frame is available by number (from scratch) or by name, which is usually more convenient.
  • history Allows you to send the visitor to the previous / next page in history, as well as change the URL without reloading the page using the History API.

This object is purely informational. It provides information about the browser.

As an example of using navigator, let's display all the properties of the browser:

< script type= "text/javascript" >document. writeln(); for (var property in navigator) ( document.write(" "+property+":" ); document.writeln(navigator[property]); )

history object

Responsible for 2 buttons: 'forward' and 'back'. The browser, following the link from page to page, saves the history of these transitions. Those. You can go back a page or go forward a page. You can simulate pressing these buttons from javaScript using methods and properties.

The object has a property - length - length.

The object has methods: go (), back (), forward ().

Consider an example:

< script type= "text/javascript> function length()( //shows the number of transitions alert(" Number of transitions: "+history.length);) function back()( //go back history.back();) function forward()( //go forward 1 jump history forward();)

location object

Responsible for address bar. Allows you to get and change the address of the page. As soon as the address changes, the browser automatically navigates to the new address. Those. you can simulate a jump to an address.

There is properties:

  • hash - label.
  • host - hostname + port.
  • hostname is www and.ru in the site address.
  • href - contains the address bar. Here you can write another address, and the browser will go to this address.
  • pathname is the page itself.
  • port - the post to use.
  • protocol is http:// or ftp://.
  • search - options after the question mark.

There is methods:

  • assign () - jump to the specified address.
  • reload() - simulates pressing the 'refresh' button.
  • replace () - go to the specified address, but on open page there is no back button, i.e. does not save this page in history.

screen object

This is purely informational. It tells the user's screen size in pixels. It has no methods, only properties:

  • availHeight - available screen height.
  • availWidth - available screen width.
  • colorDepth is the number of bits to store colors (not currently used).
  • height - user's screen height.
  • width - the width of the user's screen.
  • updateInterval - CRT screen refresh rate (not used).

The navigator object contains information about the user's browser (in particular - is it available use of cookies files and whether Java support is enabled).

The navigator object also allows you to determine the type of operating system.

For the convenience of working with the navigator object, let's display all its properties on the screen. We recall the material from the previous lesson.

Browser information - userAgent property;

Browser language - property language ;

The name of the operating system is a property of oscpu ;

Whether cookies are enabled - property cookieEnable d;

Whether the user is connected to the Internet - onLine property.

Accessing object properties navigator is carried out through a dot.

The screen object will help you get data about the user's screen resolution, color depth, etc.

Let's do the same with the screen object: first, display all its properties on the screen.

Now, using the height and width properties of the screen object, we get information about the screen resolution - its height and width in pixels. And also about the bit depth of the color palette - the colorDepth property.

location object returns the url current user window.

It also contains data about parts and components of the current address: host name, port number, protocol, etc.

Object properties location.

Let's use the href property of the location object to display the URL of the current document.

Let's do our homework for this lesson.

Find out from which browser the person came to your page and, depending on the browser, display on the screen:

If firefox: "Your Firefox browser."
If opera: "Your browser is Opera."
If chrome: "Your Chrome browser."

To complete this homework assignment,:

Use the userAgent property of the navigator object to get information about the current browser.

At the time of solving this problem, I received the following data about Firefox browsers, Opera and Chrome.

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:56.0) Gecko/20100101 Firefox /56.0

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome /61.0.3163.100 Safari/537.36 OPR /48.0.2685.39

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome /61.0.3163.100 Safari/537.36

Find browser names using regular expressions from information about them.