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

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);

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:
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.
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.
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.
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.

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.

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.

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.

Related

Javascript call AFTER redirect in phonegap using java script function?

This is a function that I am Calling to redirect to specific page in phonegap Android platform app.
function redirect(){
var strr = "example.html";
window.location="index.html";
setTimeout("someJSfromSomething(strr)",5000);
}
This cannot be done. And if it can, then it should not be done, for the following reason:
When the page is redirected (or refreshed), the old page is gone. The JavaScript code is evaluated in the context of the old page. If you can still run the code after its host page is dead, then you have a "runaway", or "ghost" script. In hacking terms, you have a "persistent" script that can be potentially used to breach the security. A well designed browser should not allow such script to stay alive, or allocate it any resource to execute. In fact, modern browsers all do this. For this very reason, PDF and Flash plugins are exploited to keep the script running.
I hope I have convinced you what you are asking is not possible. However, you can still have a solution by not refreshing the page. If the index page is your own page, wrap the entire page in a div container and use an Ajax load.

any way to auto-execute custom js lib function on external websites?

I was wondering if there's any way to attach a js lib to an external webpage after the page has loaded?
To provide a simple example, could I load www.google.com into IE and somehow display the webpage with a green scroll bar?
I would like this process to happen automatically on each page load instead of having to manually execute this process on each page load.
I am assuming that you are talking from a web developer's point of view.
I don't think it is possible without any hacks.
This would also be a huge security risk, because loading javascript code on an external website means that the code can potentially do anything on behalf of the user. It can capture keystrokes, take screenshots, note down passwords and do a lot of illegal stuff.
So instead of this, you can create a browser extension (add-on) which will have to be installed by user's permission (and his knowledge), and can run any code on any page (if the user allows it)

Keep the console script persistent in Google Chrome

I have a script I want to use in the Google Chrome console. But this script is going to reload the page. A bit like this :
setInterval(function(){location.reload();},3000);
The problem is, once it's reloaded, the script stops and the console is cleared. I tried the option "Preserve log on navigation" : it preserves the log, but the script doesn't restart after reloading.
How should I do ? Thanks :)
There is no way to actually do that. The only possible way I found is to develop a Chrome' extension and place your script on it. Your script will be excecuted every time the target page is loaded, so when you execute the location.refresh() method , the next time the page is loaded your script will be executed all again and so on. If you wish to persist some data between page loads, then you can use localStorage.
Find more information here https://developer.chrome.com/extensions/getstarted
How to inject scripts via extensions ?: https://developer.chrome.com/extensions/content_scriptsremember that the scope of the extensions is isolated from the rest of the page, so you cant directly access JS variables or functions declared in the page itself from an extension BUT you can interact with the DOM. Good luck
I am using a cool Chrome Extension called Resource Override, which allows you to inject a script on specific urls. So all you have to do is put your url (with * on each end), and create a JS file injected into the HEAD, and it will be ran every time. You start from scratch on every page though, so I'm not sure how you can persist data. Maybe in cookies?
Try creating a parent html document that has an iframe whose source is the original html page. Place the javascript in the parent html page and tell it to reload the iframe.

How can I stop loading a web page if it is equiped with frame-buster buster?

How can I stop loading a web page if it uses a frame-buster buster as mentioned in this question, or an even stronger X-Frame-Options: deny like stackoverflow.com? I am creating a web application that has the functionality of loading external web pages into an <iframe> via javascript, but if the user accidentally steps on to websites like google.com or stackoverflow.com, which have a function to bust a frame-buster, I just want to quit loading. In stackoverflow.com, it shows a pop up message asking to disable the frame and proceed, but I would rather stop loading the page. In google, it removes the frame without asking. I have absolutely no intent of click jacking, and at the moment, I only use this application by myself. It is inconvinient that every time I step on to such sites, the frames are broken. I just do not need to continue loading these pages.
Edit
Seeing the answers so far, it seems that I can't detect this before loading. Then, is it possible to load the page in a different tab, and then see if it does not have the frame-buster buster, and then if it doesn't, then load that into the <iframe> within the original tab?
Edit 2
I can also acheive the header or the webpage as an html string through the script language (Ruby) that I am using. So I think I indeed do have access to the information before loading it into an <iframe>.
There's no way to detect this before loading the page since the frame busting is done via a header or is triggered via JavaScript as the page is loading.
Without a server backend you won't be able to as you are pretty limited with the amount of tinkering you can do in javascript due to crossdomain policies.
You might want to consider creating some sort of a blacklist for URLs to stay away from...

can a page always refused to be iframed or be part of a frameset if javascript is enabled?

When a page is iframed or included as part of a frameset, it can use Javascript to check so. (i think usually by
if (self != top) top.location.href = self.location.href;
). Can the page always "jump back out" like that when Javascript is enabled? Is there a way to not let it jump back out? (suppose my page is iframing that page).
(in another scenario, i think if we use window.open() to open the page in a new windoe, then the page almost always cannot refuse... unless they check the referrer and actually refuse to serve the page even if it is a new, standalone window).
As far as I know, there is only one way - a Microsoft proprietary extension to HTML that allows an iframe start tag to specify that the page should be loaded with reduced security privileges - which usually blocks JS from running in it.
Happily other browsers do not support this feature.
Perhaps you can check out the window.location.href property. If it matches, then let your page load. Else, stop!
There is some interesting work being done at Carlton University that was presented at CCS called SOMA (Same Origin Mutual Approval) which basically presents a model for content inclusion (ala iframes) where both parties must approve of the inclusion for the browser to go through with it.
Unfortunately it's still in its early stages, and although they've already developed a Firefox addon, it needs to gain traction in the web development community and native browser support before it's viable.
It's still cool to check out though: http://www.ccsl.carleton.ca/software/soma/
Without any special extension or hacks to the browser, the framed page can choose to break out of the frame by reloading itself into the top frame.
Personally, I feel that attempting to block a framed page from breaking out of the frame is bad netiquette.

Categories

Resources