Click here to Skip to main content
14,303,876 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.

Introduction

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

Background

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", "http://example.com");   

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:- http://example.com:8080). 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) {
       alert(e.data);
       // 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 == 'http://iframe.example.com') {
		alert(e.data); 
		// 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 'http://iframe.example.com'.

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.

References

  1. window.postMessage
  2. Cross-document messaging

History

  • 02 May 2013 - First version submitted for approval

License

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

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Official Facebook Page - Tadit Dash

Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | Author | 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

taditdash.wordpress.com

Programming Community Profiles


jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

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

Comments and Discussions

 
QuestionOrigin of postmessage Pin
Rasmus Jaja3-May-17 23:05
memberRasmus Jaja3-May-17 23:05 
AnswerRe: Origin of postmessage Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)9-May-17 3:33
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)9-May-17 3:33 
GeneralMy vote of 5 Pin
Anurag Gandhi27-Apr-16 4:57
professionalAnurag Gandhi27-Apr-16 4:57 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Apr-16 20:03
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Apr-16 20:03 
QuestionJquery Highlight element of external website load through Iframe Pin
Member 1163027721-Apr-15 5:54
memberMember 1163027721-Apr-15 5:54 
QuestionPlease help for "Get parent value in iframe" Pin
Youzelin20-Apr-15 16:46
memberYouzelin20-Apr-15 16:46 
AnswerRe: Please help for "Get parent value in iframe" Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)20-Apr-15 22:28
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)20-Apr-15 22:28 
QuestionSample Code Pin
Member 340128823-Nov-14 6:18
memberMember 340128823-Nov-14 6:18 
AnswerRe: Sample Code Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Nov-14 20:57
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Nov-14 20:57 
Questioncommunication with defferent Domain iframe Pin
‫محم د‬‎22-Nov-14 0:49
member‫محم د‬‎22-Nov-14 0:49 
AnswerRe: communication with defferent Domain iframe Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Nov-14 16:26
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Nov-14 16:26 
GeneralMy vote of 5 Pin
Sibeesh KV13-Nov-14 3:41
professionalSibeesh KV13-Nov-14 3:41 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:43
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:43 
GeneralRe: My vote of 5 Pin
Sibeesh KV13-Nov-14 3:44
professionalSibeesh KV13-Nov-14 3:44 
AnswerThis was great! Pin
rhawk46-May-14 12:16
memberrhawk46-May-14 12:16 
GeneralRe: This was great! Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)6-May-14 16:50
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)6-May-14 16:50 
GeneralMy vote of 5 Pin
Omar Gameel Salem26-Dec-13 8:01
professionalOmar Gameel Salem26-Dec-13 8:01 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Dec-13 16:49
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Dec-13 16:49 
QuestionNice job Pin
Mateus Barbosa4-Dec-13 9:03
memberMateus Barbosa4-Dec-13 9:03 
AnswerRe: Nice job Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)4-Dec-13 19:41
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)4-Dec-13 19:41 
QuestionNeed for a complete example please Pin
franva00810-Aug-13 22:17
memberfranva00810-Aug-13 22:17 
AnswerRe: Need for a complete example please Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Aug-13 2:31
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Aug-13 2:31 
GeneralRe: Need for a complete example please Pin
franva00812-Aug-13 14:28
memberfranva00812-Aug-13 14:28 
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 

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.

Tip/Trick
Posted 1 May 2013

Stats

129.7K views
27 bookmarked