Three BOM objects in JavaScript

1. Location Object

1. URL
2. Properties of the location object

3. Location object methods

2. Navigator Object

3. History Object

Summarize

The window object provides us with a location property for getting or setting the URL of the form, and can be used to parse the URL. Because this property returns an object, we also refer to this property as the location object.

Next, let’s take a closer look.

1. Location Object

1. URL

Uniform Resource Locator (URL) is the address of a standard resource on the Internet. Every file on the Internet has a unique URL, which contains information about where the file is located and what the browser should do with it.

The general syntax of a URL is:

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

composition	illustrate
protocol	Communication protocols, commonly used http, ftp, maito, etc.
host	Host (Domain Name)
port	The port number is optional. If omitted, the default port of the scheme is used. For example, the default port of http is 80.
path	A path is a string separated by zero or more '/' symbols, generally used to represent a directory or file address on the host.
query	Parameters are in the form of key-value pairs, separated by the & symbol
fragment	The content after the fragment# is often used in links and anchors

2. Properties of the location object

insert image description here

We can use these properties to get the corresponding information in the address bar, for example:

For example : On the csdn homepage, open our developer tools -> console, enter location, and many properties and return values of the location object will appear:

insert image description here

Or we can directly enter the corresponding attributes in the console to get the corresponding return value.

insert image description here

For example, we now make an effect of clicking a button to jump to the page:

<body>
    <button>Jump</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;
        btn.addEventListener('click',function(){
           time()
        })

       var time = setInterval(function(){
            if(timer == 0) {
                this.location.href = 'https://www.baidu.com'
            }
           else{
                div.innerHTML = 'The page will jump after '+timer+' seconds'
                timer--;
           }
        },1000);
       
    </script>
</body>

The running results are:

insert image description here

3. Location object methods

Location Object Methods	Return Value
location.assign()	Like href, you can jump to a page (also called a redirect page)
location.replace()	Replace the current page. Because the history is not recorded, you cannot go back to the previous page.
location.reload()	Reload the page, equivalent to the refresh button or F5. If the parameter is true, force refresh ctrl+f5

For example, we can also jump to the page by using the location object method:

 <button>Click to jump</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            location.assign('https://www.baidu.com')
        })
    </script>

insert image description here

The jump achieved by location.assign() method can go back a page, but location.replace() does not record history, so it cannot go back a page.

2. Navigator Object

The navigator object contains information about the browser. It has many properties, the most commonly used of which is userAgent, which returns the value of the user-agent header sent by the client to the server.

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = ""; //mobile phone} else {
    window.location.href = ""; //computer}

3. History Object

History Object Methods	effect
back()	Back function
forward()	Forward function
go(parameters)	If the forward and backward function parameter is 1, it will go forward one page; if it is -1, it will go back one page

For example, if we have two pages and want to use one button to go forward and backward, we can bind the forward method and history method to the buttons of the two pages respectively, as shown below:

index.html

<body>
    <a href="list.html">Go to the list page</a>
    <button>Forward</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            history.forward()
        })
    </script>
</body>

list.html

<body>
    <a href="index.html">Return to the main page</a>
    <button>Back</button>
    <script>
        var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
        history.back()
    })
    </script>
</body>

The effect is:

insert image description here