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
Related
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
I have a problem when I am trying to check the source of an interesting page which keeps refreshing automatically every 3-5 seconds (presumably due to some js script) which resets my Inspect Element Inspector window every time the page is refreshed.
Is there any other way other to stop that page from refreshing or perhaps the Inspector window from resetting itself other than turning on NoScript to stop the page from refreshing automatically?
Usually I just open DevTools, switch to the appropriate panel if necessary, and hit pause.
Opening DevTools: Via menus, or by press F12, Ctrl+Shift+I, or Cmd+Shift+I depending on browser and OS.
Switching panels: Pick the panel from the tabs at the top of DevTools. It'll be called "Debugger" (Firefox, IE) or "Sources" (Chrome) or similar.
Pausing: In the Debugger/Sources panel, click the pause button (usually looks like the pause button on a television remote control, ||) or press the keyboard equivalent. Keyboard equivalents are
Firefox & Chrome: F8
IE: Ctrl+Shift+B
(Updated 2020-03-30)
In Firefox 74 this option is in Options -> Privacy & Security -> Permissions
(Original reply)
Firefox has the option to prevent refresh natively, the option is in Advanced->General->Warn me when websites try to redirect or reload the page
The most popular solution for this problem is to trap the beforeunload event. The browser will ask the user for confirmation to leave the page. The code, in its simplest form, looks like this:
window.onbeforeunload = function() { return true }
You can enter this code in console. Alternately, you can simply paste the following URL in the browser address bar (console not required). You can even bookmark it.
javascript:window.onbeforeunload = function() { return true }
Be advised that modern browsers might chop off the javascript: part when you paste it inside the address bar; make sure you type it back.
To determine the cause of redirect in Firefox, try the following:
Open Web Developer Tools (CTRL + SHIFT + I), open "Toolbox Options" and check the "Enable persistent logs" option. This makes the logs persist across page loads (logs are cleared otherwise).
Now switch to "Network Monitor" tab.
Open the URL and let it refresh.
Inside the Network Monitor > Cause column you will find out why the page reloads.
The cause column is pretty ambiguous (Chrome does a much better job). However, if JavaScript was used to trigger page (re)load then it at least shows you the filename and line number of that script.
When the page is still loading, you can press the Esc key. While the page is still white, press it. When you stop the page from loading at this point, this usually stops all the auto loaded javascript. Any scripts that run on actions are usually not effected. Each page is different, try different timings.
When I use a site called NovelUpdates there is javascript that can make certain elements hidden, and when I press Esc on page load all the elements that would be hidden after page load are visible. Then when I click a button that would execute javascript that operates with no problems. NoScript isn't going to solve your issue I believe.
Another example of this are those websites with annoying boxes that pop out after 10 seconds that says you aren't a member and can't view any more of this site without logging in, like some news article websites.
What you could do is use the command exit(), which is the equivalent to die in php and simply stops the script.
If you don't know what's causing it and you don't want to look for the "bad boy", then you might as well stop the entire script at the very bottom of the page.
I created a simple JavaScript function to display my pop-up window once it loads. But it keeps on being blocked by Firefox and Google Chrome and I have to somehow enable it on the Firefox and Chrome to display the pop-up.
Are there any alternatives for this?
I have a player on the pop-up window so I have to use a pop-up to let the player play automatically. The problem is that if I put it on the page itself, once the user clicks another page the entire page reloads and the player automatically stops for a few seconds until the whole page reloads and I have to prevent this from happening.
The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.
Please take a look at dthorpe's answer here. It covers your question.
You could try putting the player on the original page, and using something like History.js to control page changes (you could have the main page body in one wrapper div that changes, and leave the player outside of it).
Otherwise, you could try (assuming you meant a HTML5 <video> or <audio> player) downloading the data to localStorage/cookie/[other persistent storage mechanism] and have it seek everytime you change a page.
It will be hard to stop browsers from blocking your pop up window, because any way to do so is inherently exploitable; however, if you call the function to open another window from an onclick event, you may be able to circumvent some popup blockers. Also, some popup blockers allow popups when using the https protocol, although not many have this feature, and https can be hard to implement for the average website, if you don't have physical access to the server.
One other option is to open the other page in another tab (like this w3c example; you can 'click' the link with javascript).
You might also want to look at this post, as it is somewhat similar.
I only just discovered you asked this question.
Here's the answer in full.
Basically, you can simply create the popup immediately as the user event is fired, then fill it with content (your player, for instance) as you have it available.
I'm trying to reload my page every time the user puts my page in focus again or opens their browser. My code works, if the user is in the browser and changing pages, but it doesn't work if the user exit the browser (without actually shutting it completely down) and then opens the browser again, where my page would be the first site they see. I am testing this on chrome for android. Is there another event I need to listen for?
I am looking for a method to reload on all browsers as soon as the user enter my page, no matter what state it was in before - mobile browsers are especially important.
Code:
<script type="text/javascript">
onload = function () {
onfocus = function () {
onfocus = function () {}
location.reload (true)
}
}
</script>
This is a pretty crazy idea to reload the page all the time in full, your users will hate you. If you are going to do it, just do partial updates to the page.
Anyway, to answer the question, check the PageVisibility API(Chrome) or the specs. This event fires when the page is visible to the user either by bringing the app into focus or by changing tabs.
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?