JavaScript BOM location object + navigator object + history object

1. Location Object

1. URL
2. Properties of the location object
3. Location object methods

2. Navigator Object

3. History Object

Preface:

The window object provides us with a location property for getting or setting 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

2. Properties of the location object

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:

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

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:

3. Location object methods

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>

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

2. Navigator Object

navigator object contains information about the browser. It has many properties, the most commonly used of which is userAgent , which returns the value of 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

window object provides us with a history object to interact with the browser history. This object contains the URLs that the user has visited (in a browser window).

The three most commonly used methods are:

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:

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

<body>
    <a href="index.html" rel="external nofollow" >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:

Or we can use history.go(1) to go forward and history.go(1) to go back.

This is the end of this article about JavaScript 's BOM location object + navigator object + history object. For more related location object + navigator object + history object content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: