Navigator, screen and location objects - Browser and screen resolution information - Current URL. Programming browser window properties Javascript window navigator object browser name
The browser address field is usually located at the top of the window and displays the URL of the loaded document. If the user wants to manually go to a page (type its URL), he does it in the address field.
Figure: 4.2.
Property location window object is itself a class object Location... Class Location, in turn, is a subclass of the URL class, which also includes class objects Area and Link. Objects Location inherit all properties of URL objects, allowing you to access any part of the URL scheme. For more information on the URL object class, see Programming Hypertext Navigation.
For backward compatibility with JavaScript, the language also supports the property window.document. locationwhich currently completely duplicates the window. location with all its properties and methods. Let's now look at the properties and methods of the window object. location (there are no events associated with this object).
Location object properties
They are easier to demonstrate with an example. Suppose the browser displays a page located at:
Then the properties of the object location take the following values:
window.location.href \u003d "http://www.site.ru:80/dir/page.cgi?product\u003dphone&id\u003d3#mark" window.location.protocol \u003d "http:" window.location.hostname \u003d " www.site.ru "window.location.port \u003d 80 window.location.host \u003d" www.site.ru:80 "window.location.pathname \u003d" dir / page.cgi "window.location.search \u003d"? product \u003d phone & id \u003d 3 "window.location.hash \u003d" #mark "
As mentioned in previous lectures, object properties can be accessed using both dot notation (as above) and with bracket notation, for example: window. location ["host"].
Location object methods
Object methods location are designed to control page loading and reloading. This control means that you can either reload the current document (method reload ()), or load a new one (method replace ()).
window.location.reload (true);
Method reload () completely simulates browser behavior when clicking the Reload button in the toolbar. If you call the method without an argument or specify it equal to true, then the browser will check the time of the last modification of the document and download it either from the cache (if the document has not been modified) or from the server. This behavior corresponds to a simple click of the browser's Reload button (F5 key in Internet Explorer). If you specify false as the argument, the browser will reload the current document from the server no matter what. This behavior corresponds to pressing the Shift key and the browser Reload button (or Ctrl + F5 in Internet Explorer) at the same time.
Using object location, you can go to a new page in two ways:
window.location.href \u003d "http://www.newsite.ru/"; window.location.replace ("http://www.newsite.ru/");
The difference between them is in the display of this action in the history of page visits window. history... In the first case, a new element containing the address "http://www.newsite.ru/" will be added to the history of visits, so that if you wish, you can press the Back button on the browser panel to return to the previous page. In the second case, the new address "http://www.newsite.ru/" will replace the previous one in the history of visits, and it will no longer be possible to return to the previous page by pressing the Back button.
History of visits (history)
The browsing history of the World Wide Web pages allows the user to return to the page that he viewed earlier in a given browser window. JavaScript's browsing history is transformed into a window object. history... This object points to an array of URLs that the user has visited and can be accessed by selecting Go mode from the browser menu. Object methods history allow you to load pages using a URL from this array.
To avoid browser security issues, you can only navigate through History using the index. In this case, the URL, as a text string, is not available to the programmer. Most often this object is used in examples or pages that can be linked from several different pages, assuming that you can return to the page from which the example will be loaded:
This code displays the "Back" button, by clicking on which, we will return to the previous page. The method works in a similar way history. forward (), taking us to the next visited page.
There is also a go () method, which has an integer argument that allows you to jump a few steps forward or backward in your browsing history. For instance, history .go (-3) will take us 3 steps back in the browsing history. In this case, the methods back () and forward () are equivalent to the go () method with arguments -1 and 1, respectively. Call history .go (0) will reload the current page.
Browser type (navigator)
Often the task arises of setting up a page for a specific viewer (browser). In this case, two options are possible: determining the type of browser on the server side, or on the client side. For the latter, there is a window object in the JavaScript arsenal of objects. navigator... The most important of the properties of this object are listed below.
Let's look at a simple example of determining the type of viewer.
An object navigator serves to access the web browser program itself. Don't confuse it with an object windowrepresenting the current browser window and the name of the Netscape Navigator program.
appCodeName
Returns the name of the code for the Web browser program. For both Internet Explorer and Navigator, it will return the string "Mozilla". Fucking.
appMinorVersion
Returns the least significant digit of the version number of the Web browser. For example, for Internet Explorer 5.0 it will return "0", and for 5.5 - "5".
Supported only Internet Explorer from 4.0
appName
Gets the name of the Web browser program, such as "Netscape" or "Microsoft Internet Explorer".
appVersion
Returns the version of the Web browser program.
browserLanguage
Returns the code for the web browser program.
cookieEnabled
Returns true if the web browser is allowed by the user to accept cookies. Supported only IE since 4.0
cpuClass
Gets the processor class of the client computer, such as "x86" or "Alpha". Supported only IE since 4.0
language
Returns the language code of the Web browser program. Only NN supported since 4.0
onLine
Returns true if the client is currently connected to the Internet (online) and false if disconnected (off-line).
Supported only IE since 4.0
platform
Returns the name of the client platform, for example "Win32".
systemLanguage
Returns the language code of the client operating system. Supported only IE since 4.0
userAgent
Returns a string identifying the client's Web browser. It is a combination of the appCodeName and appVersion property values.
userLanguage
The same as browserLanguage.
Supported only IE since 4.0
An object navigator also supports the method javaEnabled ()that returns true if the user has allowed JavaScript scripting on the Web browser.
I would like to say a little more detail about the property appVersion, or rather, the value it returns. The thing is that IE and NN will have different values.
This is the format for Navigator:
(Version) [(Language)] ((Operating System); U | I)
Here (Version) represents the version of the web browser (Language) - the language of the program (but may not be available), (Operating system) - the designation of the client's operating system, for example, "Win96", "Win16" or "WinNT", the letter "U" - the American version of the program, and "I" - the international.
For instance:
4.0 (Win95; I)
Internet Explorer has a property value output format appVersion other:
(Compatible Navigator version) (compatible; (Version); (Operating system))
Here (Operating system) can be "Windows 3.1", "Windows 3.11", "Windows 95" or "Windows NT".
2.0 (compatible; 3.01; Win95)
Property userAgent returns a value that has the format:
(AppCodeName value) / (AppVersion value)
That is, for the two previous examples, we get the following values:
Mozilla / 4.0 (Win95; I) Mozilla / 2.0 (compatible; 3.01; Win95)
This object is purely informational. It provides information about the browser.
As an example of using navigator, let's display all browser properties:
< 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 one page or go one page forward. You can simulate pressing of these buttons from javaScript using methods and properties.
The object has a property - length - length.
The object has methods: go (), back (), forward ().
Let's 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 () (// move forward 1 transition history.forward ();)Location object
Responsible for the address bar. Allows you to get and change the page address. As soon as the address changes, the browser automatically navigates to the new address. Those. you can simulate the transition to the address.
there is properties:
- hash is the 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 - used post.
- protocol is http: // or ftp: //.
- search - parameters after the question mark.
there is methods:
- assign () - jump to the specified address.
- reload () - imitation of pressing the 'refresh' button.
- replace () - go to the specified address, but there is no back button on the open page, i.e. does not save this page in history.
Screen object
This is a purely informational object. It reports the size of the user's screen in pixels. It has no methods, only properties:
- availHeight is the available screen height.
- availWidth is the available screen width.
- colorDepth - the number of bits allocated for storing colors (currently not used).
- height - the height of the user's screen.
- 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 the use of cookies available and is Java support enabled).
The navigator object also allows you to determine the type of operating system.
For the convenience of working with the navigator object, let us display all its properties on the screen. Remembering the material from the previous lesson.
Browser information - userAgent property;
Browser language - language property;
Operating system name - oscpu property;
Whether cookies are enabled - property cookieEnable d;
Whether the user is connected to the Internet - the onLine property.
Accessing object properties navigator is done through a dot.
The screen object will help to get data about the user's screen resolution, color depth, etc.
We will do the same with the screen object: first, we will display all its properties.
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 url current user window.
It also contains data about the parts and components of the current address: hostname, port number, protocol, etc.
Object properties location.
We'll 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:
If firefox: "Your browser is Firefox."
If opera: "Your browser is Opera."
If chrome: "Your browser is Chrome."
To solve this homework you need:
Get information about the current browser using the userAgent property of the navigator object.
At the time of solving this problem, I received the following data about browsers Firefox, 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.