Use JavaScript location to access URLs, redirect, refresh pages

Source: Internet
Author: User

http://blog.csdn.net/yansanhu/article/details/5413360

This article describes how to read and modify URLs using JavaScript location objects. How to reload or refresh a page.
JavaScript provides a number of ways to access the URL that the current user accesses in the browser. All of these technologies are based on location objects. It is a property of the Window object. You can generate a new location object containing the current URL:
var currenturl = window.location;

In this article you will see all the attributes and methods of the Location object, and you will learn:
* How to read different parts of the URL
* How to redirect Web pages
* How to automatically refresh or overload the page. 1. Analysis URL

The URL has 6 parts, some of which are optional: < protocol >//< domain >:< port >/< path >< query parameters >

The protocol and domain name are mandatory and others are optional.

Here is an example of a URL containing all the parts: http://www.example.com:80/example.cgi?x=3&y=4#results

In this example, http: is the protocol, www.example.com is the domain name, 80 is the port,/example.cgi is the path,? x=3&y=4 is the query string, #results是hash, or the internal anchor point of the page. 2. Read the current URL through location

You can access the various parts of the URL using the Protocol,hostname,port,pathname,search,hash property of the Location object. You can also use the following properties:
Host
Include domain names and ports for example: WWW.EXAMPLE.COM:80
Href
Contains the entire URL, for example: Http://www.example.com:80/example.cgi?x=3&y=4#results

Example: var currenturl = window.location;   alert  ( currentURL.href );      // Displays  ' Http://www.example.com:80/example.cgi?x=3&y=4#results '    alert  ( currentURL.protocol ); // displays  ' http: '    alert   ( currentURL.host );     // displays  ' www.example.com:80 '    alert  ( currentURL.hostname ); // displays  ' www.example.com '     alert  ( currentURL.port );     // displays  ' no '     alert  ( currentURL.pathname ); // displays  '/example.cgi '    alert   ( currentURL.search );   // displays  ' x=3&y=4 '    alert   ( currentURL.hash );     // displays  ' #results '   3 using the Location action URL

You can use the href attribute of location to jump the page to a page that is different from the current page. Window.location.href = "http://www.example.com/anotherpage.html";

Example: <input type= "button" onclick= "window.location.href= ' http://www.google.com/'" value= "Visit www.google.com"/ >

using the Location href property jump page, the previous page URL is saved in the browser's history history. the user clicks the browser's Back button to return to the previous page. If you do not want to return to the previous page you can use Location.replace () instead: Window.location.replace ("http://www.example.com/anotherpage.html");

In addition to pages that can redirect pages, you can redirect different anchor points for the current page Window.location.hash = "#moreResults";

For example: <input type= "button" onclick= "window.location.hash= ' #top '" value= "Jump to the" "Page"/>

There is an anchor point named #top on the page. The browser moves to the top when the button is clicked. Watch for changes in the browser's address bar, and when you click the browser Back button, you can go back to the previous position. 4. Reload Refresh page

You can invoke Location.reload () to force the browser to refresh the current URL again. Just as the current user clicks the browser's refresh button or F5. Window.location.reload ();

If the method does not specify a parameter, or if the argument is false, it uses the HTTP header if-modified-since to detect if the document on the server has changed. If the document has changed, reload () downloads the document again. If the document is not changed, the method loads the document from the cache. This is exactly the same as the user clicks the Refresh button for the browser.

If you set the method's argument to true, it bypasses the cache and downloads the document from the server, regardless of the date the document was last modified. This is exactly the same as when the user presses the SHIFT key while clicking the browser's Refresh button. Window.location.reload (TRUE);

Simple example: <input type= "button" onclick= "Window.location.reload ()" value= "Reload the page"/>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.