JavaScript refresh page special effect code

Source: Internet
Author: User

There are many methods to refresh the page in js, such as reload (), loaction, location. href, which can achieve the page refresh effect. Let's take a look at these methods.

It is usually used in web development. There are more than one method. How many methods have you mastered?

Common page refresh Methods

History. go (0)
Location. reload ()
Location = location
Location. assign (location)
Document.exe cCommand ('refresh ')
Window. navigate (location)
Location. replace (location)
Document. URL = location. href

Today, in the project, the chrome refresh page is invalid. After repeated tests, it is found that the "#" character is used to prevent page refresh.
Don't you understand? Let's take a look at the demo.

The Code is as follows: Copy code

// Javascript
$ (Function (){
$ ('# Reload'). show ('low ');
$ ('# O1'). click (function (){
Location = location
})
$ ('# O2'). click (function (){
History. go (0)
})
$ ('# O3'). click (function (){
Location. reload ()
})
$ ('# O4'). click (function (){
Location = location
})
$ ('# O5'). click (function (){
History. go (0)
})
$ ('# O6'). click (function (){
Location. reload ()
})
$ ('# O7'). click (function (){
Window. location = window. location
Return false
})
$ ('# O8'). click (function (){
History. go (0)
Return false
})
$ ('# O9'). click (function (){
Location. reload ()
Return false
})
})
// Html
<Div id = "reload"> page refreshed </div>
<A href = "#" id = "o1"> Example 1 </a>
<A href = "#" id = "o2"> Example 2 </a>
<A href = "#" id = "o3"> Example 3 </a>
<A href = "javascript:;" id = "o4"> Example 4 </a>
<A href = "javascript:;" id = "o5"> Example 5 </a>
<A href = "javascript:;" id = "o6"> Example 6 </a>
<A href = "#" id = "o7"> Example 7 </a>
<A href = "#" id = "o8"> Example 8 </a>
<A href = "#" id = "o9"> Example 9 </a>

Test Results

• Refresh all firefox examples normally
• Chrome Example 2 refreshing is invalid
• All opera examples are refreshed normally
• All IE examples are refreshed normally. Example 2 will add the "#" character in the address bar

This time, the "#" character is added to the address bar. The test result is as follows:

• Refresh in firefox Example 1, example 4, and Example 7 is invalid, and other refreshes are normal
• Chrome Example 3, Example 6, and Example 9 are refreshed normally, and other refreshes are invalid
• Opera Example 1, example 4, and Example 7 are not refreshed properly.
• In IE Example 1, example 4, and Example 7, the refresh is invalid, and other refreshes are normal.

It seems that this is chrome's personality. Here we design the beehive to remind you to pay attention to the following two points:

1. Try to use "#" as the blank link and use javascript:; to replace it.
2. Use location. reload () to refresh the page only when appropriate. This method will forcibly clear the cache and increase the page loading time.


How to automatically refresh the page:

1. Automatically refresh the page: Add the following code to the

The Code is as follows: Copy code
<Meta http-equiv = "refresh" content = "20">

20 indicates refreshing the page every 20 seconds.

2. automatic page Jump: Add the following code to the

The Code is as follows: Copy code
<Meta http-equiv = "refresh" content = "20; url = http://www.bKjia. c0m">

20 means jump to the http://www.bKjia. c0m page every 20 seconds

3. Automatically refresh js version on the page

The Code is as follows: Copy code
<Script language = "JavaScript">
Function myrefresh ()
{
Window. location. reload ();
}
SetTimeout ('myrefresh () ', 1000); // refresh once per second
</Script>

JS refresh framework script statement

// How to refresh the page containing the framework

The Code is as follows: Copy code
<Script language = JavaScript>
Parent. location. reload ();
</Script>

// Refresh the parent window in the Child Window

The Code is as follows: Copy code

<Script language = JavaScript>
Self. opener. location. reload ();
</Script>
(Or <a href = "javascript: opener. location. reload ()"> refresh </a>)

// How to refresh the page of another framework
<Script language = JavaScript>
Parent. Another FrameID. location. reload ();
</Script>

If you want to refresh the window when closing the window or refresh the window when opening the window, you can call the following statement in <body>.

The Code is as follows: Copy code

<Body onload = "opener. location. reload ()"> refresh when opening a window
<Body onUnload = "opener. location. reload ()"> refresh when disabled

<Script language = "javascript">
Zookeeper opener.doc ument. location. reload ()
</Script>

Related Article

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.