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.
Related
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.
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 trying to run a JS script on a website (not my own) and I want it to refresh the website, in order to check for updates. However, I have only found code online for reloading the entire page (location.reload(true), etc...), which clears any code that I have running through the console. I am new to JS so is there any way to refresh a page and keep the JS code running? Also might there be a way to only reload load a certain portion of the page?
Basically,
Reload website without stopping code
Using jQuery you can easily load any part of a page from a URL using AJAX. To fill the body element with the contents of a URL:
$('body').load('/page');
Your URL can respond with the segment of HTML you want to render, or you can request a full web page and grab just the segment you want buy adding a selector:
$('body').load('/page body');
The page isn't technically refreshed, just the HTML content inside the body (or whatever element you select) is replaced. Any previously loaded header content like JS remains and keeps running.
There is no way to actually refresh the entire page without stopping the execution of the JavaScript code.
For doing updates on the page there would be two possibilities:
Use of AJAX (Asynchronous JavaScript and XML) to check for new updates on the page. There are some very good tutorials out there on the internet – just google »AJAX JavaScript«.
Use of IFRAME. Make a page and stuck all the stuff in it and then put that page in an iframe and then reload the iframe instead of reloading the entire page.
Hope I could help you.
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.
I am building an application where I want to load a page from another server into my page. The particular page that I'm pulling data from depends on a query that is being run (with OAuth access) on that foreign server. Once I get the URL for that page, I am loading it in an iFrame and displaying it on my page.
The problem is, the URL that the query gives me is actually to a page that forwards three times before getting to where I actually want to go. To make things more complicated, it also has frame-buster code on the initial page. I set my page to redirect to a page that returns a 204 status on page unload so as to beat the frame-buster, but now it's just stuck displaying the initial blank page instead of the content I want, which is at the end of three redirects.
My initial idea was to try to capture the code for the outgoing location request on page unload. I had hoped to be able to see where the user is being redirected to and load that request inside the iFrame instead. Repeat three times to get the correct page in the iFrame. Intuitively, however, this felt like it shouldn't be able to work, and of course it does not because letting pages see where their users are going to upon leaving a site would be a major privacy issue.
Next, I was thinking that maybe I could just parse each new page in turn as it was loaded into the iFrame to find the script for the redirect. I'm pretty sure it's done on the server side, however, since looking at the code I was getting didn't turn anything up.
I started looking for ways to maintain that redirection inside the iFrame. That is, allow the redirect to occur, but force it to stay inside the iFrame while also preventing the frame-buster code from doing anything. This would be the easiest solution, but I can't find a good way to do it. Right now, I just have a blank page loading inside an iFrame, and I think there's something on the server side that performs the redirect that isn't running in the iFrame. The frame buster code only prevents the entire document from changing, not the iFrame. Is there a good way to do this or am I going about things the wrong way?
To prevent the frame buster, from here:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>
load the first page via curl locally, strip the busting code, make all links absolute and display that in the iframe.
it should redirect as espected and do your merry thing.
Good luck making all the urls in the document absolute. Dont forget javascript urls and functions you might need to override by pasting in your owncode after the script tags.