Click here to Skip to main content
Click here to Skip to main content

Communication with Cross Domain IFrame - A Cross Browser Solution

, 2 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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
NOW I am a Conference Speaker. Please invite me to your College, Company, Event or Conference !!!
 
Proud Indian | Microsoft MVP | CodeProject MVP | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cricketer | 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
  3. Code Project MVP 2014
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionSample Code PinmemberMember 340128823-Nov-14 7:18 
AnswerRe: Sample Code PinprotectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Nov-14 21:57 
Questioncommunication with defferent Domain iframe Pinmember‫محم د‬‎22-Nov-14 1:49 
AnswerRe: communication with defferent Domain iframe PinprotectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Nov-14 17:26 
GeneralMy vote of 5 PinprofessionalSibeesh KV13-Nov-14 4:41 
GeneralRe: My vote of 5 PinprotectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 4:43 
GeneralRe: My vote of 5 PinprofessionalSibeesh KV13-Nov-14 4:44 
AnswerThis was great! Pinmemberrhawk46-May-14 13:16 
GeneralRe: This was great! PinprotectorTadit Dash6-May-14 17:50 
GeneralMy vote of 5 PinmemberOmar Gameel Salem26-Dec-13 9:01 
GeneralRe: My vote of 5 PinprofessionalTadit Dash26-Dec-13 17:49 
QuestionNice job PinmemberMateus Barbosa4-Dec-13 10:03 
AnswerRe: Nice job PinprofessionalTadit Dash4-Dec-13 20:41 
QuestionNeed for a complete example please Pinmemberfranva00810-Aug-13 23:17 
AnswerRe: Need for a complete example please PinprofessionalTadit Dash12-Aug-13 3:31 
GeneralRe: Need for a complete example please Pinmemberfranva00812-Aug-13 15:28 
AnswerRe: Need for a complete example please PinprofessionalTadit Dash12-Aug-13 21:23 
Generalgood technique to know PinprofessionalBrian A Stephens14-May-13 11:07 
GeneralRe: good technique to know PinprofessionalTadit Dash14-May-13 22:09 
GeneralMy vote of 5 PinprofessionalRenju Vinod6-May-13 1:58 
GeneralRe: My vote of 5 PinprofessionalTadit Dash6-May-13 2:02 
GeneralMy vote of 5 PinmemberNewton Carlos Dantas3-May-13 7:50 
GeneralRe: My vote of 5 PinprofessionalTadit Dash3-May-13 8:24 
GeneralMy vote of 5 PinmemberMember 93405712-May-13 4:55 
GeneralRe: My vote of 5 PinprofessionalTadit Dash2-May-13 4:57 
GeneralMy vote of 5 Pinmember_debasis2-May-13 2:28 
GeneralRe: My vote of 5 PinprofessionalTadit Dash2-May-13 2:45 
GeneralMy vote of 5 Pinprofessionalsisirp882-May-13 1:01 
GeneralRe: My vote of 5 PinprofessionalTadit Dash2-May-13 1:10 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 2 May 2013
Article Copyright 2013 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid