Click here to Skip to main content
14,333,637 members

Communication with Cross Domain IFrame - A Cross Browser Solution

Rate this:
4.90 (25 votes)
Please Sign up or sign in to vote.
4.90 (25 votes)
1 May 2013CPOL
This tip will help you to communicate with a cross domain Iframe which is added in the form.


This particular tip gives you a very brief and easy way to handle the cross domain IFrame communication.


Recently, I joined MS Dynamics CRM team in my company.

There was a requirement in the project I was working - to place one IFrame inside the CRM Form, which is in a different domain and push some data from IFrame to Parent window. But due to the same origin policy, it will not permit to get data from different domains. So, I searched a bit and followed some articles.

Finally, I came up with an answer, which is a Cross Browser solution. Let me explain that below.

Using the Code

We need to use window.postMessage for this task.

The syntax is:

window.postMessage(message, targetOrigin); 

In the IFrame

We will write the below code to post/send a message to Parent window/form.

window.parent.postMessage("Hello From IFrame", "*");

Note: Here '*' as targetOrigin parameter indicates no preference, otherwise you can specify the domain of Parent Window/the window to which message is posted like below:

window.parent.postMessage("Hello From IFrame", "");   

This targetOrigin parameter is the domain of window to which the message is passed. If you have any port number associated with the Parent window, then you need to mention that as well (For Example:- This needs to be exactly correct, otherwise the message will not be posted.

In the Parent Window

We will write the below code to listen to the message posted by IFrame.

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];

// Now...
// if 
//    "attachEvent", then we need to select "onmessage" as the event. 
// if 
//    "addEventListener", then we need to select "message" as the event

var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
       // Do whatever you want to do with the data got from IFrame in Parent form.
}, false);    

For Security

We should always send the targetOrigin parameter as the Url of the target window/Parent window.

And we also need to check the origin of the event or Url of Originating window/IFrame. This is because any malicious website can send data or manipulate it.

So, the secure code of the receiver will look like below...

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
	if (e.origin == '') {
		// Do whatever you want to do with the data got from IFrame in Parent form.
}, false);  

Here the domain of IFrame/Origin of message posted is ''.

Points of Interest

You can do the reverse as well. That means you can pass message to the IFrame from Parent window and receive the same in IFrame.


  1. window.postMessage
  2. Cross-document messaging


  • 02 May 2013 - First version submitted for approval


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
  7. &l

Comments and Discussions

AnswerRe: Need for a complete example please Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Aug-13 20:23
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Aug-13 20:23 
Generalgood technique to know Pin
Brian A Stephens14-May-13 10:07
professionalBrian A Stephens14-May-13 10:07 
GeneralRe: good technique to know Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)14-May-13 21:09
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)14-May-13 21:09 
GeneralMy vote of 5 Pin
Renju Vinod6-May-13 0:58
professionalRenju Vinod6-May-13 0:58 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)6-May-13 1:02
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)6-May-13 1:02 
GeneralMy vote of 5 Pin
Newton Carlos Dantas3-May-13 6:50
memberNewton Carlos Dantas3-May-13 6:50 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)3-May-13 7:24
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)3-May-13 7:24 
GeneralMy vote of 5 Pin
Member 93405712-May-13 3:55
memberMember 93405712-May-13 3:55 
Good one
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)2-May-13 3:57
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)2-May-13 3:57 
GeneralMy vote of 5 Pin
_debasis2-May-13 1:28
professional_debasis2-May-13 1:28 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)2-May-13 1:45
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)2-May-13 1:45 
GeneralMy vote of 5 Pin
Sisir Patro2-May-13 0:01
professionalSisir Patro2-May-13 0:01 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)2-May-13 0:10
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)2-May-13 0:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 1 May 2013


27 bookmarked