Check if the link results in reloading the page - javascript

I develope a chrome extension; with a content script I inject some code in the page. What I want is an event that triggers if the current tab is going to update.
I tried to catch the click event of an a-element and it does work in somehow 80% of all cases. I already check if it's an anchor, but there are still many links which don't reload the page or forward to another.
$('a', document).click(function (e) {
// ...
});
So, what I want is described in the following three steps:
Event: the page is going to reload
prevent it from reloading, execute some code
trigger reloading the page afterwards

Depending on your requirements, have you considered listening to beforeunload event? It's fired when the page is about to unload (also including refresh the current page).

Related

Best way to detect browser window changes like go back, url change, reload, close event

So I am working on a testing application and I need to call a finsihTheTest() function (i.e. this function finishes the test by saving answers, time and other information) whenever following conditions occur:
User tries to reload page.
User tries to go back from the page.
User tries to close the tab.
User tries to close the browser window.
User goes to another url.
If anything happens that closes the page like laptop/PC shutdown, internet lost or anything else.
What I exactly want to do is, if once a user starts the test and by any mean he attempts to leave I want to save his state. Which is being done by the function finishTheTest().
I got a clue but it didn't work:
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;
To get the full results for your cases there's many things you should now on how browsers react on many scenarios.
To understand more please read this section :
Especially on mobile, the unload event is not reliably fired. For example, the unload event is not fired at all in the following scenario:
A mobile user visits your page.
The user then switches to a different app.
Later, the user closes the browser from the app manager.
Also, the unload event is not compatible with the back/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire the unload when a user navigates away.
If you're specifically trying to detect page unload events, it's best to listen for the pagehide event.
window.addEventListener('pagehide', function(event) {
document.cookie = "saveData=test"
},false)
This way you can save your user current data and reload it on next page window load event

Can I "catch" a redirect executed by a script, with javascript eventListeners?

I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.
You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.
Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest

Stop window from loading after hyperlink click

Some of the queries we have can take tens of seconds to complete.
I would like to be able to cancel the page-load as if the "Stop" button from browser was pressed.
But binding it to key shortcuts using javascript.
From extensive testing it seems that window.stop() works only when the document is not ready or still loading. I would like to stop the page from loading after a link was clicked.
The goal of doing it using javascript is that I would like to perform other operations too.
Tested in Chrome, FF dev and IE...
Anyone encountered a similar behavior and have suggestions on how to proceed ?
1- user clicks a link/a/href
2- realizes its the wrong link
3- presses ctrl-c to stop the loading and stay on this page
the function checks for certain conditions before proceeding to not prevent default behavior...
TLDR: when calling window.close() after click a link/a it wont stop the page from loading, is there any other way to stop a page from loading after a href click event
It turns out that you cannot use this method the way I needed too.
The stop() method is exactly equivalent to clicking the stop button in
the browser. Because of the order in which scripts are loaded, the
stop() method cannot stop the document in which it is contained from
loading, but it will stop the loading of large images, new windows,
and other objects whose loading is deferred.
source / developer.mozilla.org

pagebeforehide event fired just for "inner" page transitions

I need to do something when leaving page (page '#first').
It's really simple:
$(document).on('pagebeforehide', '#first', function(event, ui) {alert('leaving page');});
No problem when I leave page by "inner" links something like this one:
Open something
here event fired and handler executed.
But when I want to open external link like this one:
Open something
here event not fired and handler not executed.
Doesn't matter is page content simple or complex - I found that this depends only on fact whether link inner or external.
What's wrong?
rel="external" means that page will be opened as an external page and all previous page content (including its scripts) will be lost, that will also trigger a full page refresh so your pagebeforehide event is not going to trigger because it will no longer exist.
jQuery Mobile page events can occur only during normal page changes. Basically what I want to say is you need to go to the other jQuery Mobile page for this event to trigger. In your case you are forcing app to do a full page refresh, at this point, page refresh will occur before pagebeforehide event.
EDIT :
While there isn't any crossbrowser solution for this you can always cheat.
Instead of having href link inside your button, replace your link http://www.google.com with # and add it an id so we can identify it, like this:
Open something
Now add a click event to this button and do what ever needs to be done before changing page to www.google.com:
$(document).on('click', '#change-page', function(){
// Do something here then change page
});
Or link your button to another dummy inner page (use this inner page only for this purpose), catch pagebeforehide on it:
$(document).on('pagebeforehide ', function(){
// Again do something here and manualy change the page
});

How can I get reason of page unloading in javascript's onunload event, in IE?

There may be different reasons of page unloading:
1 User closes the current window.
2 User navigates to another location.
3 Clicks the Back, Forward, Refresh, or Home button.
4 User submits a form, and then browser starts to unload current page and load page with results of form submitting. (Assuming that the current window is the form's target).
5 and so on...
Can I somehow know in onunload handler that the reason of unloading is p.4, i.e. moving to page with results of form submitting?
I could define some flag when submiting form, but this does not solve the problem. Because response (on form submit) from web server takes some time, browser doesn't unload the current page immediately and waits response from server. And during this waiting user may close window or navigate anywhere. And I need to know whether was it indeed moving to results page or something else...?
You could hijack some of those events.
For example for links, you could add an event handler on links that saves their href attribute, performs what you require, then sets window.location to the href you had stored in a variable.
The exact reason of page unload cannot be known in the unload handler. OnUnload event is not a standard and was implemented by IE first.
Different browsers might handle it differently and fire the event for different cases.
msdn reference
mozilla reference
So if you are trying to know the reason of unload in the unload handler, I think you might be out of luck. However as Alex pointed out in his answer, you could probably know about user navigating away from your page by clicking some link on your page by making your click handlers for those links more intelligent.
on unload cant handle its looks like but maybe when load you can handle.
as explained
performance.getEntriesByType("navigation")[0].type
You can check this Link
What is the replacement for performance.navigation.type in angular?

Categories