I have page(lets say https://example.com/dir1/tidy.html), that embeds an iframe that hosts content from another domain (lets say https://foobar.com/dir2/whatsup.html). If the user presses Cancel inside the embedded iframe page, is it possible to redirect the parent/container page to a different url (like https://example.com/dir2/yeah.html)? How do I accomplish this?
I'd have thought that since the iframe page belongs to a different domain, the same-origin-policy would stop me from using javascript to send events/actions to the parent page.
The same origin policy prevents you from reading data from the document on the parent domain.
It doesn't stop you from:
top.location = "foo bar baz";
Or even just:
...
Related
I have a iframe on my web page. is there a way or JS library I can use to know which word user click within the iframe?
In short, no.
In long, yes.
If the iFrame is loaded on the same sub-domain and domain name as the page that contains the iFrame (www.example.com), you can interact with it without doing anything special.
If your iFrame is loaded on the same domain, but a different sub-domain (sub1.example.com, sub2.example.com), put this line of javascript at the top of your javascript file, in both the iFrame page and the page that contains it:
document.domain = 'example.com';
This will make the iFrame "think" that it is ok to communicate through javascript.
If the iFrame is on an entirely different domain, there is nothing you can do.
I wrote a chrome extension which injects a toolbar on top of sites (say amazon.com) as an iframe at the top.
When the user click on the action button on the toolbar (inside iframe), it's basically a form submit action, with action pointing to my full site (on another domain).
It's working, however only inside the iframe. I'd like the whole page to redirect to my site, rather than the iframe.
Is there anyway to do that in extension?
If you are using an iframe :
Same Origin Policy prevents you from doing this.
Unless you can hack/XSS the other site's files to inject the JS, you will have a hard time.
Now if you legitimately need to communicate with the other page, and you either have control of the other page or can setup it to communicate with your server, you can use window.postMessage, JSONP or even Ajax with CORS (latter 2 will be harder to pass dynamic content though). But I believe it is not the case.
else :
you can directly inject the js script in to the page itself by that you can handle all operations in the main page same as running something on chrome console.
I have a page with one button. When clicked, that button navigates to http://google.com/
$("#button").click(function(){
window.location="http://google.com";
});
I would like this navigation to work when this page is embedded within the iframe. I don't want to affect the outside host page, but rather only the contents of the iframe. What's a good cross-platform way to:
Detect if I'm contained in an iframe
If not, navigate like above.
If yes, navigate the iframe only?
(I'm going to try to implement the algorithm I just described, but regardless I think this question is interesting enough to be posted. If I succeed, I'll post my solution)
1) Detect if I'm contained in an iframe
if (window != window.top) {
// the page is inside an iframe
}
2) If not, navigate like above.
navigate like above
3) If yes, navigate the iframe only?
When you write window.location.href = 'http://www.google.com'; you are navigating the contents of the iframe, not that of the top page. If you want to navigate the top page, you can only do this if this top page is on the same domain as the iframe and you could use window.top.location.href.
UPDATE:
There is a security mechanism built in browsers which forbid you from redirecting to sites that set the X-Frame-Options: SAMEORIGIN response header when inside an iframe. That's the case with http://www.google.com. Simply navigate to this site and look at the response HTTP headers with FireBug or developer toolbar you are using and you will see this header. You cannot redirect to it and you will get the following error message:
Refused to display document because display forbidden by X-Frame-Options.
It's basically a security mechanism implemented by some sites whose authors didn't want you to embed them in an iframe.
I have a frameset on my server which hosts a top frame main menu which is on the same domain, and a bottom frame which the content is sometimes on the same domain and sometimes on a remote domain.
I would like to monitor the bottom frame to see if it changes, and if it does change, what URL it went to. Is there a way to do this using JavaScript?
If you have control over the content coming from your domain, you should be able to detect when the user is leaving your domain. You can catch normal link navigation by listening to click events, and add extra code to notify of navigation to any other ways the user may leave the page.
Once the frame is showing content from a remote domain, though, you won't be able to get any information out of it without co-operation from the content itself (which, even then, involves nasty cross-domain communication hacks). A frame pointing to a remote domain will not report any information about itself to your page, not even the current URL.
You should be able to bind to the load on the iframe and work with that.
I'm trying to access the URL of an iFrame that I open on my site. The iFrame is from another domain so traditional methods violate the same origin policy and are flagged as cross site scripting. However, I just discovered window.postMessage, but I don't quite know how to pull it all together.
My goal is to capture the final URL in the iFrame. For example, a user clicks a button on my site to open an iFrame. Say that iFrame loads a web site and the user clicks around on the site. When they close the iFrame, I want to capture the URL so the next time they click the button on my site, I can open the iFrame to the same state that the site was in last time they visited. Is this possible with window.postMessage?
Thanks!
document.iframe[name].src
document.iframe[name].document.location.href