How to change content after page is loaded (JS)?

Question

I would like a javascript to run after a page is loaded , like on the example below with a delay of 6seconds. Right after the page loads the rest of JS is lost (obvious)... Got any ideea how change content after page is loaded without clicking a button?

javascript:window.location = "http://example.com"; 
setTimeout(function() {
    document.getElementById('lightbox').style.display = 'none';
}, 6000);

Answer 1

I have not understood what you are saying. JS is lost? Please be more clear.
I think what you are talking about is the jquery ready function which runs after the DOM is ready.
Or in the other case, try using window.onload() function.

Answer 2

Your example shows that you are first redirecting and then attempting to hide #lightbox. This script would not work, because you are redirecting the browser to another site before #lightbox gets hidden.

In short, you cannot have Javascript of a previous page manipulate DOM of the next page if you redirect the user to another URL (or even the same URL). Only Javascript that is 'on currently open page' can manipulate currently open page and no other pages.

Answer 3

Once you set window.location the original page will be unloaded before the new page is loaded by the browser. This means your script will be gone before the new page start loading and thus can't modify the new HTML anymore.

This behavior is inherent to the security model of the browser. Without it you could inject any JavaScript into any web site of your choosing, which would be a huge security risk. What you are asking for is so-called XSS (for cross site scripting), which is prevented by the browser applying a so-called SOP (for same-original policy).

There are some common ways to work around this limitation in a safe way:

1. Set up a proxy to serve both your JavaScript and the original site. This way both your script and the original site come from the same domain and satisfy the browser's same-original policy (SOP). You could run the original site in an iframe with your custom script occupying the top-level window. Alternatively you could inject your script into the HTML as it is being retrieved through your proxy.

2. Run your script as a browser add-on or user-script. If you choose to do this, the user will have to specifically grant your script the rights to run locally with elevated rights. Greasemonkey popularized client-side scripts for Firefox a few years ago, but recently they seem to have lost momentum.

3. Ask the site owner to include your script. I doubt this is a valid option for your situation. But if it is a valid option it is definitely the simplest one.

4. Ask the user to run your script after the site has loaded. This one is probably also not valid for you, but if valid it would once again be a very simple solution.

Answer 4

This should do the job:

$(window).bind('load', function() {
// your code here
});

Then simply add the delay to your added code with .delay("6000");

The inserted code will only run when your page is completely loaded.