Is it possible to change page content if element exist on page ?
if (window.frames[0].document.getElementById('xl')) { //load content of page acta.html}
Only if the content loaded in the frames is in the same domain of the page where the script is executed. See the Same-Origin Policy – SOP.
Otherwise you can't access to the frame's DOM.
If the page are in the same domain, then your code is perfectly valid – assume the page in the frames is loaded.
Update:
To change the content, then you can simple change location object of the frame:
if (window.frames[0].document.getElementById('xl')) {
window.frames[0].location.href = "acta.html";
}
If you have a reference to the frame / iframe element instead of the window's (frame[0]), you can also use the src attribute.
You can also change the top window's location just doing:
window.location.href = "acta.html";
However that will change, of course, the URL of the page too. If you want to keep the URL as before, you should use another iframe that basically wraps your current main window and the hidden frame. So the URL displayed in the address bar will not change even if you change the content of the first frames to "acta.html".
Another approach could be use the XMLHttpRequest object to makes a http call and load your page's source, then replace the body of the current page with the one's retrieved by the XHR. However, that's ugly. This kind of redirection, keeping the same URL, should be done on server side, not on client side.
Related
I have a webpage that displays an iframe containing a random website. After 10 seconds I want the website within the iframe to replace the "parent" website.
Let's say my website www.aaa.com has an iframe containing the website www.bbb.com. After 10 seconds I want the browser to replace the currently open www.aaa.com with www.bbb.com without reloading the page so the user doesn't lose their state. Basically replacing the document and updating the URL bar accordingly.
I can't just get the URL of the iframe and change location as the user could for instance be watching a video and it would start again from the beginning because of the page reload.
I've been searching for this for a few hours and there is absolutely nothing that I could find.
You can set window.location = "//www.bbb.com" but it will just fetch that webpage as usual.
You can set an url in the browser using window.history.replaceState(null, "test", "www.aaa.com/mypage?foo=bar") but it will fail crossdomain (it will even fail using a subdomain on your site).
And you cannot get the contents of a cross-domain iframe.
These are all related to cross-origin security. There may be exceptions, such as when you have elevated permissions (browser plugin). Some functionality may be available using CORS and what not, but you need cooperation from the owner of the other domain.
In short, the closest to what you want is probably to set the iframe to the full width/height of the window.
I've just been wondering where the boundry for scripts of the iframe contents lie. Which element is the highest parent of the iframe contents. The iframe itself or the "html"
I tried the following but then I realize the scripts inside the iframe can't access the iframe element properties, and no warning is thrown.
The following script resides inside the iframe.
<script>
$(document).ready(function(e) {
$(document).on('click', '.subscribe_submit', function(){
console.log($('.iframe').attr('data-test'));
//////////// data-test returns undefined for this.
</script>
while the iframe is like this.
<iframe data-test="$2y$12$PPuMZWPdy.zhaVnGWV7SD.Tqhw87qLe4e.vaTtWuIccxLrUFu/cda"></iframe>
*This is cross-origin.
*In data-test, is not a password, I just used the PHP password API to encrypt that string.
The browser window owns all.
frames are a property of the window and within frames are separate windows.
Similarly the document for your page is a property of the window.
Browser security rules dictate what you are or aren't allowed to do based on the domain of the main window as well as what frames are allowed to do with regard to interacting with any higher level window.
Within your page (document) you should have no problem accessing the iframe tag and setting or getting attributes. There are however frame blocking headers that pages can set to prevent being loaded within another frame
Need more details to troubleshoot why you aren't able to get the value of the data attribute
The host page owns the iFrame element. If the contents are on another domain, the contents are bounded at their own "window" which sits inside the iFrame.
Let's say we have a web-page at a given location (like www.foo.com/page1.html) and that page contains this (global) code:
if (self != top) {
top.location.replace(location.href);
}
So, if we try to load that page into an IFRAME, the page will "jump" out of the iframe into the browser window, which will (as a consequence) destroy the page that contained the iframe.
This is OK, but I would like to implement an exception to that rule. Specifically, there is this other page on a different domain (like www.bar.com/page2.html), and I would like that this other page is able to embed the first page via an IFRAME.
How would I have to modify the code of the first page, so that it allows to be embedded into the other page?
Is this OK?
if (self != top && top.location.href !== "http://www.bar.com/page2.html") {
top.location.replace(location.href);
}
I doubt you'll be able to check the external parent page's URL because the Same Origin Policy should prevent access to any of its properties.
Maybe there is some trickery that I'm aware of that allows it anyway. Barring that, the best idea that comes to my mind is checking document.referrer. As far as I know, a document requested in an iframe will always have the embedding page's URL in the referrer across browsers.
If the referrer is http://www.bar.com/page2.html, the page is either in an iframe on that page, or it was linked to from there (which is the only really big shortcoming of this method: You can't tell for 100% sure whether it's an incoming link, or an iframe embed).
Obviously, the document's referrer is spoofable by the client but I don't think that's an issue here.
If you pass X-FRAME-OPTIONS http header with the value of SAMEORIGIN, most modern browsers (including IE8) will not let the content be iframed from an alien domain.
I thought it may help.
Can the iframe access its parent if I changed its src to "about:blank" after loading it in the parent page?
Note: the iframe is in another domain not the same as the parent page.
No. If you change the src attribute of the frame to about:blank the content of that frame will be replaced with the blank document, and any javascript running inside the iframe will terminate.
If you need a way for the two to communicate, one of the ways to go is to expose some kind of JSON based endpoint that can be called from one of the domains, while the other polls for a result.
UPD: Regarding your pronto question, I would guess they don't use an iframe. Pronto is a bookmarklet, which allows code to run in the "outer" page. While I didn't verify this, I'd guess they are able to make the browser page load their JS library via an injected script element, and display their UI that way.
Generally, no. This is known as cross-site scripting (XSS) and is considered a security risk, so most browsers prevent it.
I have an HTML page (say welcome.html) which contains an iframe to a page I have no control over (say app.html). The user performs some actions using the app within the iframe and clicks submit. Once they do this, they are taken to a new page (say thanks.jsp), which loads within the iframe. Is there a way in which I can force thanks.jsp to load in the full frame and not the iframe once submit is clicked? Remember, I have no control over the logic behind that Submit button or app.html. I do however have control over welcome.html and thanks.jsp. If possible, I would like to stick with HTML and/or JavaScript. Thank you in advance.
You probably want to use a framebuster, with a base target in case it fails.
First:
If thanks.jsp is requested via a post request - redirect so it you present the page as the response to a get request.
Then:
Include framebuster JavaScript:
<script type="text/javascript">
if (self != top) { top.location.replace(location); }
</script>
Finally:
In case the user doesn't have JavaScript enabled, make sure they don't stay in the frame any longer then they have to:
<base target="_top">
On thanks.jsp you can put in the following JS:
// Parent window not the same as this one
if (self !=top)
{
top.location.href = self.location.href;
}
This will work provided that you have thanks.jsp on the same server as the original page containing the frame, due to the same origin policy.
The above code checks the url of the page you're on, then the one of the page it's executing on (thanks.jsp) - if they don't match you're sent to the thanks.jsp url. This method works fine when thanks.jsp is a static page, but won't carry postdata etc across with it.