Communicating with IFrame

Creating IFrame in a web page is easy and it is also easy to have one way communication with it. WebPage can send a message to IFrame using PostMessage, but IFrame cannot send the message back to parent window. It is not allowed.

IframeSignalR

 

There are scenario’s where you may need to get the message back from IFrame. In this post, i will be talking about how you can have a two way communication with IFrame.

As we know, IFrame cannot send the message back to the root web, then we are left only with one option to go out to a service  and let that service send the message back to the root web. To have a good performance, we need to use web sockets for this communication. As you can see in the picture, the web page send the messages to IFrame using PostMessage, and when IFrame need to send any message back, it calls our SignalR server, which in turn calls the client method on parent web page.

You can find the full code here. Code is written using Typescript for web page pages, and C# for SignalR server. The code shows you how  JavaScript client can send and receive messages with SignalR server. In IFrame I load another web site, which is called “Extension B” in code.  First run SignalR server by pressing F5 in Visual studio. And then run the ExtensionB site and in last run the RootWeb site. Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s