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.
Related
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
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.
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.
At first this might seem an odd question, but here's my problem. I'm developing a website that on window.load calculates the div positions as it has some dynamic scroll event highlighting (DOM Ready is the wrong choice for this as images and content isn't loaded yet and the calculate div positions are incorrect when the page has fully rendered.) The local assets run perfectly and are optimised for performance, but my problem is that the client wants social media embeds, for instance a twitter follow and facebook like button. Twitter seems to render pretty quickly, but Facebook takes so long and you can literally lag for about 20-30 seconds before the window.load event is ready, which means my navigation then lags and doesn't work properly. I don't know if it's even possible, but is there a way to determine when all local JavaScript files are loaded (these are included before the closing body tag).
Probably. All JavaScript in a page is executed in the order in which the browser encounters it. So when you add a <script> element as the last element inside the <body> element (i.e. at the bottom of the page), this code will run after all other script code has been executed. Also, at that time, the DOM will be finished (no further HTML to process) except for things that callbacks still might do (timers, onload-handlers).
So what you can try is to put a <script> element between your code and the code from Facebook. But that means your DOM won't be ready.
A better solution is probably to start loading the Facebook code in the background inside of onload. That means all the rest of the page is there and Facebook can take its time.
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.