Click here to Skip to main content
12,502,578 members (58,268 online)
Click here to Skip to main content
Add your own
alternative version

Stats

83K views
26 bookmarked
Posted

Communication with Cross Domain IFrame - A Cross Browser Solution

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
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 Dash6-May-14 16:50
protectorTadit Dash6-May-14 16:50 
GeneralMy vote of 5 Pin
Omar Gameel Salem26-Dec-13 8:01
memberOmar Gameel Salem26-Dec-13 8:01 
GeneralRe: My vote of 5 Pin
Tadit Dash26-Dec-13 16:49
professionalTadit Dash26-Dec-13 16:49 
QuestionNice job Pin
Mateus Barbosa4-Dec-13 9:03
memberMateus Barbosa4-Dec-13 9:03 
AnswerRe: Nice job Pin
Tadit Dash4-Dec-13 19:41
professionalTadit Dash4-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 Dash12-Aug-13 2:31
professionalTadit Dash12-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 Dash12-Aug-13 20:23
professionalTadit Dash12-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 Dash14-May-13 21:09
professionalTadit Dash14-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 Dash6-May-13 1:02
professionalTadit Dash6-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 Dash3-May-13 7:24
professionalTadit Dash3-May-13 7:24 
GeneralMy vote of 5 Pin
Member 93405712-May-13 3:55
memberMember 93405712-May-13 3:55 
GeneralRe: My vote of 5 Pin
Tadit Dash2-May-13 3:57
professionalTadit Dash2-May-13 3:57 
GeneralMy vote of 5 Pin
_debasis2-May-13 1:28
member_debasis2-May-13 1:28 
GeneralRe: My vote of 5 Pin
Tadit Dash2-May-13 1:45
professionalTadit Dash2-May-13 1:45 
GeneralMy vote of 5 Pin
sisirp882-May-13 0:01
professionalsisirp882-May-13 0:01 
GeneralRe: My vote of 5 Pin
Tadit Dash2-May-13 0:10
professionalTadit Dash2-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.

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