What is the difference between html pageshow and load events? - javascript

HTML5 has a pageshow event. In what instances does it work differently than the body's onload handler?

The pageshow event fires every time the page is loaded whereas the load event doesn’t fire in Firefox 1.5 when the page is loaded from cache.

In addition to the answer above, there is a far more important difference between the two.
According to my test on iOS, if you load a local page from a WkWebView, hit a link to jump to another page and use the goBack function to go back the previous page, only onpageshow will fire, onload will not.

Related

PopState not firing after coming back from another site

My popstate event handler is defined thusly:
window.addEventListener('popstate', function (ev) {
alert('popstate');
/* recompose dom */
});
It works fine while I am within my site as I use back and forward, however when I navigate to another site and then come back my event does not fire.
I assume this is by design based on the following comment on Mozilla Developer:
Browsers tend to handle the popstate event differently on page load.
Chrome (prior to v34) and Safari (prior to 10.0) always emit a
popstate event on page load, but Firefox doesn't.
If this is the case, how do I get the most recent pushed state when coming back to my page from another site.
I figured it out; pull the current page state from history.state on document ready and apply it.

Why IE10 fires beforeunload event when clicking on anchor element with javascript href and how to prevent it

In order to track when user leaves the page, we listen to beforeunload event. Everything works fine until user, that uses IE10, clicks on empty link (anchor) with javascript in href parameter instead of url. For example:
Empty link with JS in href
This case makes IE10 sometimes fire beforeunload event. Chrome/IE11 work fine (0 beforeunloads), while IE10 fires it from time to time, especially if you click it fast. Here is JSFiddle to try it.
Does anyone know why does it happen and how to fix it? I would be happy to remove/replace such anchors in mark-up, but it is impossible in my case.
Thanks.
Technically, IE10 may be considered correct to do so because you are unloading the page... kind of. If your link were:
<a href="javascript:'blah';">
Then you would end up on a new page with just the content 'blah'. This is how javascript: links work. void returns nothing (undefined), and when a javascript: link returns nothing then it does not replace the page contents.
A similar thing would happen, in theory, if the target resource is a download - the page would normally be unloaded but because the target is a download, the page does not change. And HTTP response of 204 No Content should also trigger this behaviour.
However, as you have noticed, this is undesirable behaviour and so it has become more common to see that the browser will not trigger an unload event until the page itself really is being unloaded. Unfortunately, this is a browser-level thing and outside your control, as far as I'm aware.
To my knowledge the only real fix for this would be to ensure you are properly preventDefaulting your click event.

Mobile Safari: JS event for jump to last scroll position on refresh

Is there a Javascript event that I can hook into that fires when the page is refreshed, and Safari 'jumps' back to the scroll position you were at?
It's very frustrating, as the scroll event only fires on user/touch-induced scrolls, so will not fire in this case. I need to specifically find a way to bind to that event, as DOMContentLoaded, for example, fires even before that, and the window's load event would fire too late, as that will wait for all content to load.
Reason for this is that I am checking if an element is in view (using getBoundingClientRect).
Am I missing something here? As I'm not using jQuery, but vanilla JS, I have no document.ready() to try (though judging by the source code of it, I doubt it would work).
After some experimenting, it turns out that the load /onload event on the window triggers this jump in Safari Mobile (and presumably other browsers too), so binding to that event would suffice.
I hope this helps someone!

when the web page will be visiable to the end user

there are two events related to web page load - ondomcontentloaded and onload.
At which point will the user will be able to see the web page?
That really depends on the browser. Chrome and Firefox progressively render the webpage as it loads, even if HTML hasn't been completely sent. This will be happening before either of those events are triggered.
onload will always fire after DOMContentLoaded, so if you want the earliest event, use DOMContentLoaded.

JavaScript + onunload event

I want to fire onunload event to do some clean up operations, I have multiple tabs(Navbar) showing multiple links to different web pages,my problem is that even when I'm in some other page my unload function which is in tag of some other jsp is fired. Please help to resove this, I want unload function to be called when user closes browser in that page.
I'm not sure how you got the onunload event to work....The problem I've found with using the onunload event is that it is fired after the page has been unloaded. This means that no more JavaScript can be executed because the page has been unloaded.
You should be looking into using the onbeforeunload event.
This event is a little unique because if the function that handles this event returns anything a pop up is displayed asking the user if they would like to continue with the operation. So, in your case make sure that your function doesn't return anything. The other thing to note about the onbeforeunload event is that, at this time, Opera does not support it (Safari, FireFox, and Internet Explorer do though).
Both the onbeforeunload and onunload events are executed every time the page is unloaded. If a control on your page submits the page to the server code, the page is unloaded and the JavaScript is executed.
If you don't want the JavaScript to be executed when a control on your page is submitting it to the server you have to implement something that checks to see whether or not your code should be executed.
This is simple, add a JavaScript boolean to the page and a function that set's this boolean to true. Make sure that every element in your page that posts back to your server code sets this boolean to true before it submits the page. Check this boolean in your onbeforeunload event to see if your cleanup code should be executed.
Hope this helps,
-Frinny
It seems that the unload function has been created in a global scope. Try placing that function only on the page you want to act.
You have a frameset page? And you want to be notified when they navigate away from the frameset? Add an onbeforeunload on the frameset. I don't know what you mean by clean up, but you can't send XHRs during unload safely across browsers

Categories

Resources