Let's say I want to stop all videos from playing in the browser so while on the youtube.com page I run HTMLVideoElement.prototype.play = function() {}. I click around and since it doesn't do a full page refresh the JS persists.
However, if I press refresh, then my JS is reset and HTMLVideoElement.prototype.play once again points to native code. Is there a way to persist that command even on page refreshes?
JavaScript is run anew on every page load. This is by design and cannot be changed. Use a browser extension or a userscript that runs the script on each page load.
Things run on the console will be lost when the page navigates away (that includes navigating to the same page you're already on).
Is there a way to persist that command even on page refreshes?
Yes. So long as it's a page you control (so, not youtube.com) you can persist a setting before and after a page refresh by:
adding a hash fragment to the URI;
adding a query string to the URI
placing a cookie
using the window.name property
using HTML5 Web Storage (localStorage / sessionStorage)
By using javascript to query any of the above after the page reloads, you can re-establish the setting you had in place prior to the page refresh.
Related
I need a functionality that will retain the page into its navigated state so I build it using local storage. I added remove local storage on $(document).ready to reset the view when the page is refreshed. The problem I'm encountering is when I navigated back, the local storage is removed also. How do I know if the page is refreshed using F5 or navigated back using browser back button?
Note : Though MDN's article states that webkit browsers don't support it, their latest versions do on my computer.
The PerformanceNavigation Object gives you this exact information.
It's type property will return one of these status codes :
TYPE_NAVIGATE (0)
The page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the URL in the address bar.
TYPE_RELOAD (1)
The page was accessed by clicking the Reload button or via the Location.reload() method.
TYPE_BACK_FORWARD (2)
The page was accessed by navigating into the history.
TYPE_RESERVED (255)
Any other way.
and you get it with performance.navigation.type.
When accessing an external page from a Cordova app, then coming back to app with back-button, the app page is empty, or more precisely, everything that was dynamically added to the page is gone.
This seems to be the case whether the link is a native <a href="..."> or is accessed via window.open(), or via cordova.InAppBrowser.open(). The only way it does not happen is when the actual browser is specified via "_system" parameter.
Is there a way to prevent this, or is it normal behaviour ? Should I simply rebuild the dynamic page upon returning ? I could do that, but no event seems to be fired on return, not even a pageshow.
Navigating back refreshes (reloads) the page...so anything dynamically added to the page will correctly be gone. You could use hash tags on the URL for simple information or localStorage for more complex information about the page state and re-populate the page based on it when it reloads.
pageshow most like isn't firing because of some assumption being made in the JS code. Try listening to the $(document).ready for debugging purposes. It could also be caused by the issue described here (because of caching): 'pageshow' is not received when pressing "back" button on Safari on *IPad"
Specifying system causes the page to open in a new window...so that's
I'm trying to write a script (bookmarklet, really) which has two parts. At the end of the first part, I want to click a button on the page which takes me to a second page. I then want the script to continue running after the second page has loaded. Is this possible?
Every web page load is treated separately by the browser, so there is no way to get a script to continue running where it started off. Here are a few solutions though:
1) Save state to cookies, then read the cookies from the script on the second page to pick up where you left off. For instance, you could save the user's name "John Doe" to a cookie in the first page, then the script in the second page could load the user's name from the cookie. This is probably what you'll want to end up doing.
2) Instead of loading a new page in the browser window, load your new page in an iFrame, and the script running in your outer window won't be interrupted. You can reach inside iFrames with JavaScript as long as they are on the same origin.
You aren't able to load a new page and continue a script from the previous page. But you could ajax load the new page, use the history API to modify the URL, and your script would keep running.
I am using location.reload() in a script
and I want to run another script when the reload() function has finished.
Are there any events associated with reload()?
All the scripts on the previous page are long gone by the time the page reloads. Therefore, there is no way to tell from the script that ran .reload() that the page has fully loaded.
Unless:
You work with an iframe, where you can reload just the iframe and listen for load events from outside the frame. That way, the script that listens to it is preserved.
Or, have the page contain an onload as suggested. However, the previous code, values and all are long gone as you just reloaded the page.
You might be solving the problem at the wrong angle as well. Instead of having the script, with all it's values, persist across page changes, why not make the data persist across page changes and read them upon every page? In this case, localStorage or cookies is your friend.
What is the expected behavior of Javascript when you do a soft refresh on a web page?
I know that when you refresh a page, most web browsers will preserve values entered into form elements on a page. But it becomes harder to predict what will happen on a refresh when half of the page is dynamically generated.
My question is a little more general than that, though. I want to know what the prescribed behavior is for a web browser when a page will dynamic content is refreshed. In particular:
What Javascript gets rerun.
How is the DOM altered on the refresh.
How are form values "floated" to the proper place in the DOM after a refresh.
What other quirky stuff goes on?
If you leave a page by clicking on a link or entering an URL into the navigation bar some browsers try to pause the page and resume it once the user comes back. This technique is known under different names:
Safari/WebKit: Page Cache
Firefox: Back-Forward Cache
Opera: Fast History Navigation
For the page it looks as if the user has never left it. However not all pages can be paused. Especially pages with plugins, pages served using HTTPS and all pages with an unload event handler are ignored by a page cache.
If the page cache is not used, the page is reloaded from the server. Browsers might fill in form fields and restore scroll positions.
A reload = a complete re-request. (shift + reload = reload all js and css files from server)
The browser might also remember name="" value="" pairs, and tries to pre-populate the fields based on the remembered pairs. It is not about trying to populate exactly what fields are in what pixel or whatever.
I refresh pages all the time when developing, all javascript is re-run as if the page is loaded anew. I do not believe the change events kick off in the page due to remembered values.
This is also true for firefox -> this frame -> reload or IE right click on a frame and reload.
Chrome does not allow single-frame reloads.