I need to pass a message from an iframe to the parent window. The parent window and iframe window are from different domains so I am running into difficulty with same origin restrictions (i.e., my attempts to access window.parent from the iframe are blocked).
I have been able to pass messages from the parent window to the iframe using the window.location.hash method as described in this article. However, the method does not appear to work for sending messages from the iframe to the parent window.
I must also find a solution that works in IE7 and IE8.
Does anyone know how to do this?
I'm about to give up and build a web API to facilitate messages from the iframe to the parent window.
Take closer look at window.postMessage API. It allows you to send message across all domains and between iframes. Perfectly works on IE as well
Related
I've got a program that needs to juggle multiple iFrames at once that each communicate to the main window with postMessage.
I need to find a way to see what iFrame element sent a specific message.
I've tried using message.source however it only shows a Window element from inside the frame (that cannot be read as they're sandboxed). That excludes the possibility of finding it via the iFrame's contentWindow.
I just try to receive postmessage from other window in my browser.
So I opened 2 sites: example1.com and example2.com. And I opened chrome inspectors on both tabs.
In one inspector I placed code:
window.addEventListener('message', function(){console.log('FIRED')})
In second one:
window.postMessage('Hello!', '*');
No fire if they're different tabs and even same domains. It only fires if it's the same chrome inspector.
So what I do wrong?
You can't arbitrarily post across tabs. The postMessage method is on window's prototype, so you need a valid Window to post against.
If you are posting to the current window's parent or a child (and can use window.parent or get the child frame's context`) or have opened a new window and still hold a reference to it, then you can post across frames or tabs. You cannot just post to an arbitrary tab open in the same browser, however, as that would be a serious security issue.
For example:
I have a main page with an iframe in it and my iframe contains a button. When I press the button inside the iframe some scripts are executed, and the design of iframe is changed. Texts appears and other stuff.
How do I detect when iframe scripts are run? (Or the button was pressed?)
The iframe is from a different domain.
If the contents of the iframe come from a different domain than the outside page, then you can't - the browser deliberately stops you from being able to tell much about what is going on inside the iframe. What you can do though is grab the URL the frame is pointing to if it changes.
If it's running in the same domain, you can just access the elements inside the iframe pretty much the same way as you would normally via the document property of the iframe
If the main page and the iframe are on the same domain, you can make the javascript in the iframe call a function or access the elements of the parent frame.
So at the end of the script in the iframe you can do
parent.script_is_finished();
If you have control over the script in the iframe, you could use window.postMessage to communicate with your main page, even if they are in different domains.
Support for this is limited to FF3+, IE8+, Chrome, Safari(5?), Opera10+
Here's a demo on html5demos.
As an update to the fact that the iframe is from a different domain:
Short answer: No. You can't detect clicks within an iframe from another domain.
Longer but still short answer: The reason you can't is the same reason you can change the contents of the iframe -- it'd be a security risk unless the iframe is on the same domain. You simply can't track user activity within an iframe sourced from a different domain.
Sorry, but I hope that helped!
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.
We have an application that reconstructs external web sites in an Iframe from within our domain so we can use tools that run in the browser to inspect the external website. This is an unavoidable requirement since we need to gather information about the external page using JavaScript. If the page were not reconstructed from within our domain, we would run into cross site scripting issues.
The problem is that the scripts on some pages redirect out of the iframe, which stops our tool from working.
My query is whether there is a way to allow the scripts to run within the iframe, but not to affect the page that contains the iFrame?
Hope that makes sense - thanks!
No I do not thinks so.
If the Iframe is loaded from the same domain any script will have full access to the page.
The redirect out of the page you refere to is the page protection from Hijacking where another site tries to use the page contents.
By ridirecting out of an iframe they avoid that.
You could try using a separate window (window.open) to load the reconstructed external sites instead of an iframe. As long as they are at the same domain, they'll still be able to communicate, but the child window won't be likely to mess with your main window.
Alternatively, your outer window can do nothing, and be at a different (sub)domain from your control window. Your control window is an iframe in your outer window, and the reconstructed external site is another iframe sharing the same domain as your control frame. Now if your 'external' iframe tries to do something with window.top (besides navigate) it will fail because of the cross-domain policy, but your control iframe will share the same domain as your 'external' iframe, so you can inspect and manipulate it.
If you use the second approach, frames will still be able to navigate the top window. You can prevent it by adding something like this in the top window:
window.onbeforeunload = function(){return '';};
Now you'll be prompted with a dialog box if anything tries to navigate the page, and you can abort navigation. This will probably fix your current approach by itself, but it may be best to have the top window at a separate domain in case the external site tries to do anything unexpected with it.