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

MySQL 8.0.18 installation and configuration graphic tutorial

Learning objectives: Learn to use Windows system ...

Understanding render in Vue scaffolding

In the vue scaffolding, we can see that in the ne...

Solve the problems encountered during the installation of Mysql 8.0.17 winx64 version

1. Manually create and add my.ini file # CLIENT S...

Vue3 (V) Details of integrating HTTP library axios

Table of contents 1. Install axios 2. Use of axio...

A screenshot demo based on canvas in html

Written at the beginning I remember seeing a shar...

Font Treasure House 50 exquisite free English font resources Part 1

Designers have their own font library, which allo...

Detailed explanation of Nginx http resource request limit (three methods)

Prerequisite: nginx needs to have the ngx_http_li...

The difference between traditional tomcat startup service and springboot startup built-in tomcat service (recommended)

Spring integration with springmvc The web.xml con...

The process of setting up an environment for integration testing using remote Docker

Demand background The team has the need for integ...

js canvas realizes slider verification

This article example shares the specific code of ...

MySQL optimization tips: analysis of duplicate removal implementation methods [millions of data]

This article uses an example to illustrate how to...

Mysql table creation foreign key error solution

Database Table A: CREATE TABLE task_desc_tab ( id...

MySQL foreign key (FOREIGN KEY) usage case detailed explanation

Introduction: The disadvantages of storing all da...

Detailed explanation of Truncate usage in MYSQL

This article guide: There are two ways to delete ...

Detailed explanation of redundant and duplicate indexes in MySQL

MySQL allows you to create multiple indexes on th...