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

How to install and modify the initial password of mysql5.7.18

For Centos installation of MySQL, please refer to...

Example code for element multiple tables to achieve synchronous scrolling

Element UI implements multiple tables scrolling a...

Super detailed teaching on how to upgrade the version of MySQL

Table of contents 1. Introduction 2. Back up the ...

Tutorial on building a JMeter+Grafana+influxdb visual performance monitoring platform in docker environment

Table of contents 1. Install Docker 2. Install an...

Summary of 10 amazing tricks of Element-UI

Table of contents el-scrollbar scroll bar el-uplo...

Solution to the Docker container being unable to access the host port

I recently encountered a problem at work. The doc...

MySQL 5.7.17 installation and configuration graphic tutorial

Features of MySQL: MySQL is a relational database...

CentOS 7 installation and configuration method graphic tutorial

This article records the detailed installation tu...

Detailed explanation of how to view the number of MySQL server threads

This article uses an example to describe how to v...

Detailed explanation of the execution process of mysql update statement

There was an article about the execution process ...

HTML5+CSS3 coding standards

The Golden Rule No matter how many people are wor...

About MYSQL, you need to know the data types and operation tables

Data Types and Operations Data Table 1.1 MySQL ty...

Dockerfile implementation code when starting two processes in a docker container

I want to make a docker for cron scheduled tasks ...

Detailed explanation of using Docker to build a development environment for Laravel and Vue projects

This article introduces the development environme...

Handwritten Vue2.0 data hijacking example

Table of contents 1: Build webpack 2. Data hijack...