Sometimes, when doing web development, it is commonly used. There are more than one way to see how many you have mastered?
Common ways to refresh pages
History.go (0)
Location.reload ()
Location=location
Location.assign (location)
Document.execcommand (' Refresh ')
Window.navigate (location)
Location.replace (location)
Document. Url=location.href
Today in the project found in the Chrome refresh page since the invalid, after repeated testing found that the "#" character block page refresh
Don't understand? Let's take a look at the demo.
The code is as follows |
Copy Code |
Javascript $ (function () { $ (' #reload '). Show (' slow '); $ (' #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
Firefox all samples flushed properly
Chrome Example 2 Refresh is not valid
opera all samples flushed properly
ie all samples are flush correctly, Example 2 adds "#" characters to the address bar
This time add the "#" character to the address bar, and again the test results are as follows:
Firefox Example 1, example 4, example 7 refresh is not valid, the rest is refreshed normally
Chrome Example 3, example 6, example 9 flush Normal, the rest is not valid
Opera Example 1, example 4, example 7 refresh is not valid, the rest is refreshed normally
IE Example 1, example 4, example 7 refresh is not valid, the rest is refreshed normally
This time it looks like Chrome is playing with personality, and here's how to design a hive to remind you of the following two points:
1. Use "#" as little as possible as a null link, using javascript:;
2. Use Location.reload () to refresh the page only when appropriate. Because the method forces clear caching, increasing the time the page loads.
ways to automatically refresh pages:
1. Page Automatic refresh: Add the following code to the
The code is as follows |
Copy Code |
<meta http-equiv= "Refresh" content= ">"
|
20 of which means that the page is refreshed every 20 seconds.
2. Page Automatic Jump: Add the following code to the
The code is as follows |
Copy Code |
<meta http-equiv= "Refresh" content= "20;url=http://www.111cn.net" >
|
20 of which refers to 20 seconds after the jump to the Http://www.111cn.net page
3. Page automatically refresh JS version
The code is as follows |
Copy Code |
<script language= "JavaScript" > function Myrefresh () { Window.location.reload (); } SetTimeout (' Myrefresh () ', 1000); Specify 1 seconds to refresh once </script> |
JS Refresh Frame Script statement
How to refresh the page that contains the frame with
The code is as follows |
Copy Code |
<script language=javascript> Parent.location.reload (); </script> |
child window refreshes parent 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 another frame's page with <script language=javascript> Parent. Another FrameID.location.reload (); </script> |
If you want to close the window or refresh when you want to open windows, call the following statement in <body>.
code is as follows |
copy code |
<body Onload= "Opener.location.reload ()" > Windows refresh <body onunload= "opener.location.reload ()" > Refresh at shutdown < Script language= "javascript" Window.opener.document.location.reload () </script> |