JavaScript BOM location object + navigator object + history object

JavaScript BOM location object + navigator object + 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:
  • Detailed explanation of JavaScript BOM composition and common events
  • Detailed explanation of BOM and DOM in JavaScript
  • JavaScript history object explained
  • Principle analysis of javascript History object
  • JavaScript navigator.userAgent obtains browser information case explanation
  • Use JS location to implement search box history function

<<:  CSS3 speeds up and delays transitions

>>:  Implementation of Nginx Intranet Standalone Reverse Proxy

Recommend

Graphic tutorial on installing CentOS7 on VMware 15.5

1. Create a new virtual machine in VMware 15.5 1....

Vue large screen data display example

In order to efficiently meet requirements and avo...

How to use JS WebSocket to implement simple chat

Table of contents Short Polling Long-Polling WebS...

MySQL query syntax summary

Preface: This article mainly introduces the query...

Select does not support double click dbclick event

XML/HTML CodeCopy content to clipboard < div c...

Detailed explanation of how Zabbix monitors the master-slave status of MySQL

After setting up the MySQL master-slave, you ofte...

Implementation of Bootstrap web page layout grid

Table of contents 1. How the Bootstrap grid syste...

Implementation of two-way binding of parent-child component data in front-end framework Vue

Table of contents 1. One-way value transfer betwe...

Interaction in web design: A brief discussion on paging issues

Function: Jump to the previous page or the next p...

Analysis of the configuration process of installing mariadb based on docker

1. Installation Search the mariadb version to be ...

Analysis of Mysql transaction characteristics and level principles

1. What is a transaction? A database transaction ...

4 ways to achieve a two-column layout with fixed left column and adaptive right column using CSS

1. float+overflow:hidden This method mainly trigg...

Brief analysis of the various versions of mysql.data.dll driver

Here is the mysql driver mysql.data.dll Notice: T...

My CSS framework - base.css (reset browser default style)

Copy code The code is as follows: @charset "...

Solution for multiple Docker containers not having the same port number

Background In Docker, four containers are created...