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

This article focuses on "how to apply hashchange, pageshow and pagehide events in Html5". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to apply hashchange, pageshow and pagehide events in Html5.

1.hashchange event

The hashchange event has been added to HTML5 to notify developers when the parameter list of URL (and all strings after the "#" sign in URL) changes. This event is added because in Ajax applications, developers often use URL parameter lists to save state or navigation information.

You must add a hashchange event handler to the window object, and then call it whenever the URL parameter list changes. At this point, the event object should contain two additional properties: oldURL and newURL. These two properties respectively hold the complete URL before and after the parameter list changes. For example:

EventUtil.addHandler (window, "hashchange", function (event) {

Alert ("Old URL:" + event.oldURL + "nNew URL:" + event.newURL);})

Browsers that support hashchange events are IE8+, Firefox 3.6 +, Safari 5 +, Chrome, and Opera 10.6 +. Of these browsers, only Firefox 6 +, Chrome, and Opera support the oldURL and newURL properties. To do this, it is good to use the location object to determine the current parameter list.

EventUtil.addHandler (window, "hashchange", function (event) {

Alert ("Current hash:" + location.hash)

});

Use the following code to detect whether the browser supports hashchange events:

Var isSupported = ("onhashchange" in window); / / there is bug here

If IE8 is running in IE7 document mode, it returns true even if the functionality is invalid. In order to solve this problem, the development engineer of Nanchang APP Development Company suggests to use the following more secure testing method:

Var isSupported = ("onhashchange" in window) & & (document.documentMode = undefined | | document.documentMode > 7)

2. Pageshow and pagehide events

Firefox and Opera have a feature called "round trip cache" (back-forward cache, or bfcache), which speeds up the conversion of pages when users use the browser's back and forward buttons. This cache holds not only the page data, but also the state of DOM and JavaScript; it actually keeps the entire page in memory. If the page is in bfcache, the load event will not be triggered when the page is opened again. Although not triggering load events should not cause any problems because the state of the entire page is kept in memory, Firefox provides some new events to better illustrate the behavior of bfcache.

The first event is pageshow, which is triggered when the page is displayed, whether or not the page is from bfcache. In reloaded pages, pageshow is triggered after the load event is triggered; for pages in bfcache, pageshow is triggered at the moment the page shape is fully restored. Also note that although the target of this event is document, its event handler must be added to window. Let's look at the following example.

(function () {

Var showCount = 0

EventUtil.addHandler (window, "load", function () {

Alert ("Load fired")

});

EventUtil.addHandler (window, "pageshow", function () {

ShowCount++

Alert ("Show has been fired" + showCount + "times.")

});

) ()

This example uses a private scope to prevent the variable showCount from entering the global scope. When the page loads for the first time, the value of showCount is 0. After that, whenever the pageshow event is triggered, the value of showCount is incremented and displayed in a warning box. If you click the "back" button to return to the page after leaving the page that contains the above code, you will see each increment of showCount. This is because the state of the variable, and even the state of the entire page, is saved in memory, and when you return to the page, their state is restored. If you click the browser's Refresh button, the value of showCount will be reset to 0 because the page has been completely reloaded.

In addition to the usual properties, the event object of the pageshow event contains a Boolean property named persisted. If the page is saved in bfcache, the value of this property is true;. Otherwise, the value of this property is false. You can detect this property in the event handler as follows.

(function () {

Var showCount = 0

EventUtil.addHandler (window, "load", function () {

Alert ("Load fired")

});

EventUtil.addHandler (window, "pageshow", function (event) {

ShowCount++

Alert ("Show has been fired" + showCount + "times. Persisted?" + event.persisted)

});

EventUtil.addHandler (window, "pagehide", function (event) {

Alert ("Hiding. Persisted?" + event.persisted)

});

) ()

By detecting the persisted property, you can determine whether other actions are needed based on the status of the page in bfcache. The pageshow event corresponds to the pagehide event, which is triggered when the browser unloads the page and before the unload event. Like the pageshow event, pagehide fires on top of the document, but its event handler must be added to the window object. The event object for this event also contains the persisted property, but for a slightly different purpose. Let's look at the following example.

EventUtil.addHandler (window, "pagehide", function (event) {

Alert ("Hiding. Persisted?" + event.persisted)

});

Sometimes, you may need to take different actions depending on the value of persisted when the pagehide event is triggered. For the pageshow event, if the page is loaded from bfcache, the value of persisted is true;. For the pagehide event, if the page is saved in bfcache after unloading, the value of persisted is also set to true. Therefore, when pageshow is first triggered, the value of persisted must be false, and when pagehide is triggered for the first time, persisted becomes true (unless the page will not be saved in bfcache).

Browsers that support pageshow and pagehide events are Firefox, Safari 5 +, Chrome, and Opera. These two events are not supported in IE9 and previous versions.

Pages that specify onunload event handlers are automatically excluded from bfcache, even if the event handlers are empty. The reason is that onunload is often used to undo actions performed in onload, and displaying the page again after skipping onload is likely to cause the page to be abnormal.

At this point, I believe you have a deeper understanding of "how to apply hashchange, pageshow and pagehide events in Html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.