Stop window from loading after hyperlink click - javascript

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

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

Check if the link results in reloading the page

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).

Chrome executing all JS again on browser back button

I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.
I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do not close.
Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}
You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.
Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).
window.addEventListener('pageshow', function(event) {
// check state of UI, etc.
});
The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.
In my case, the iframe was a hidden iframe (width and height zero).
This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.
To solve it, i just redirected the page loaded into iframe to the blank page.
Example:
page_loaded_into_iframe.php
<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>
Once pressed the "back button", the browser will reload a blank page.
Be aware that this might be not applicable if your case is not similar to mine.
In the Chrome Extension you can use the function:
chrome.webNavigation.onCommitted.addListener(function callback)
and in the callback function you may take a look to the arguments:
transitionType + transitionQualifiers
to look for:
"forward_back" The user used the Forward or Back button to initiate the navigation.
For deatils see chrome.webNavigation
Of course, this event can be communicated to the content script with the usual message model (refer to: Message Passing

How to wait until jquery animation is finished using the onbeforeunload event?

It looks like a basic problem, but I simply can not solve this. I am using an animation to smooth the navigation between pages. The window.onbeforeunload event looks good to fire the animation, but jquery do the animation on a new thread. Is there any way to wait until the animation is finished? I tried using the delay() and setTimeout() jquery functions but they obviously not stopped the function. When I add a loop at the end to wait, the window is not refreshing so the animation not even shown.
My code (jsfiddle):
window.onbeforeunload = function (e) {
$('#loader-sheet').fadeIn(500);
}
From MDN:
When this event returns a non-void value, the user is prompted to confirm the page unload. In most browsers, the return value of the event is displayed in this dialog.
onBeforeUnload is used to prompt a user, not to perform actions (like ajax, animations, or otherwise)
https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload
There's no API to accomplish what you are looking to do. If a user is leaving, the only thing the browser will let you do is prompt them and ask them if they are sure they want to leave. You cannot prevent them (or delay them while still maintaining control of the UI, or anything that uses a JavaScript API) from navigating away from your page.
You cannot prevent the page from changing - you can only present some text as confirmation (e.g. "You have an unsaved draft, are you sure you would like to leave?").
This is by design - imagine if every annoying ad popup was allowed to prevent you from exiting the page by entering a 200-second animation.
However, you might still be able to do something, depending on exactly why the page is changing. For instance, if they are clicking a link on your page (not using back/forward buttons), then you could override the click handler for each of those links, like:
$('a[href]').on('click', function () {
if (/* link would change page */) {
performPageTransition(this.getAttribute('href'));
return false;
}
});
function performPageTransition(newUrl) {
$('#loaderSheet').fadeIn(500, function () {
// Animation complete - move to new URL
window.location = newUrl;
});
}
So instead of following the link instantly, you intercept the click event, and then move the page manually yourself later.
However, I would also consider whether it's possible to load the new page content via AJAX.

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