Detect if browser is already loading another page - javascript

I am building some JS to install on people's websites. I am trying to detect if browser going away from page my script installed on. It would be easy to listen beforeunload event, but what if my script was loaded after user click on some link?
The events order is:
browser loads page A with my script installed
my script started to load
user clicks on link to page B
browser started to load page B
my script is loaded to page A ← How can I detect browser location is changing right now?

You can't detect this in this specific situation. The act of navigating from page A will stop your script from loading, even before page B has loaded.
The relevant parts of the spec are 7.8.1 Navigating across documents which details what happens when the browser is asked to navigate (the link to page B being clicked in your example). Step 11 says:
Abort the active document of browsingContext.
The abort steps make it clear that any still-in-progress fetching or parsing of the active document are simply discarded.

Related

Javascript: How to execute command that will affect browser even after refresh?

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.

Cordova: page empty when coming back from external link

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

WebdriverIO - how to determine if a page load or refresh happened

I am using WebdriverIO with Javascript and Mocha to create a UI test framework. For that, I am trying to capture screenshots every time a page loads or a page refreshes. Could someone please tell me if this is possible to do it using WebdriverIO or otherwise?
Relevant details: The pages are NOT loaded using driver.url() all the time. The launching URL is arrived at using driver.url(), and then on all navigation happen by clicking on a link on a page or performing an action that leads to another page load. Please also note that page load happens on other conditions as well, for example, when a "Save" button is clicked the same page loads again (refreshes). I am trying to capture a screenshot every time a page loads or refreshes irrespective of whatever action that might cause it. And that's why I want to abstract out the process at a global level than calling driver.saveScreenShot() in multiple places all over the codebase.

How to make Javascript also run after induced button click changes page?

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.

universal loading animation for location.href changes

A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.

Categories

Resources