Shulou(Shulou.com)06/02 Report--

This article will explain in detail what the three BOM objects about JavaScript are like, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

The window object provides us with a location property to get or set the form's URL, and can be used to parse the URL. Because this property returns an object, we also call this property the location object.

Next, let's take a look at the details.

1. Location object 1, URL

Uniform Resource Locator (Uniform Resource Locator, URL) is the address of standard resources on the Internet. Every file on the Internet has a unique URL that contains information indicating the location of the file and what the browser should do with it.

The general syntax format of URL is:

Protocol://host [: port] / path/ [? query] # fragment

Http://www.itcast.cn/index.html?name=andy&age=18#link

Composition description protocol communication protocol, commonly used host hosts such as http,ftp,maito (domain name) port port number is optional, when omitted, the default port of the scheme, such as the default port of http is 80path path, a string separated by zero or more'/ 'symbols, is generally used to indicate a directory or file address on the host in the form of key-value pairs, and the fragment fragment # is separated by the & symbol. The following content is common in the link. Anchor point 2, properties of location object

We can get the corresponding information in the address bar through these attributes, for example:

For example, on the csdn home page, open our developer tools-> console, type location, and many properties and return values of the location object will appear:

Or we can enter the corresponding attribute directly in the console and get the corresponding return value.

For example, let's now do the effect of clicking a button to jump to the page:

Jump 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 [XSS _ clean] =' page will jump in'+ timer+' seconds' timer-- }, 1000)

The running result is:

3. Location object method location object method return value location.assign () is the same as href, you can jump to the page (also known as redirected page) location.replace () to replace the current page, because the history is not recorded, so you cannot go back to the page location.reload () and reload the page, which is equivalent to the refresh button or f5. If the parameter is true, you can force refresh ctrl+f5.

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

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

The jump achieved by location.assign () allows you to roll back the page, but location.replace () cannot reverse the page because it doesn't record history.

2. Navigator object

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

If ((navigator.userAgent.match (/ (phone | pad | pod | iPhone | iPod | ios | iPad | Mobile | BlackBerry | IEMobile | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | WebOS | Symbian | Windows Phone) / I)) {_ window.location.href = "; / / Mobile phone} else {_ window.location.href ="; / / computer} III. History object method functions back () function forward () forward function go (parameter) forward function if the parameter is 1, forward one page if-1

For example, we now have several pages. To achieve the forward and backward function through a button, you can bind the forward method and the history method to the buttons of the two pages, as shown below:

Index.html

Go to the list page and proceed to var btn = document.querySelector ('button'); btn.addEventListener (' click',function () {history.forward ()})

List.html

Back to the main page var btn = document.querySelector ('button'); btn.addEventListener (' click',function () {history.back ()})

The results are as follows:

Or we can use history.go (1) for the forward function and history.go (1) for the back function.

About how the three BOM objects of JavaScript are shared here, I hope the above content can be of some help to you and can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.