Cross Domain JavaScript Communication

Question

Here's a situation. My customers would be having their own web pages. On that page they might have an iFrame in which they can show a page located on my server. Outside the iFrame they would have simple buttons, which when clicked should execute javascript functions in iFrame.

So basically the code of customer's web page on customer's domain would be something like this

<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>

And code of myserver.com/some_html_page.htm would be

$("#TestButton").click(function(){
  alert("Hi");
});

I did my reserach and I am aware of the Browser Security issues, but I want to know is there any way to handle this, may be with json or something ?

possible duplicate of [Cross domain iframe issue](http://stackoverflow.com/questions/9393532/cross-domain-iframe-issue) — Quentin, May 31 '12 at 06:54

score 1 · Answer 1 · answered Jun 01 '12 at 06:38

As you can already tell (given the parent and child are on different domains), you definitely cannot reach up from the child iFrame into the parent to listen for events.

One way around this is to pass messages between the pages. This will require your clients to include additional javascript in their page as well as the iFrame which points to your server. This is supported in native javascript with postMessage, but including the library @Mark Price suggests will make your life much easier.

So here goes an example:

Clients Page:

...
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.postMessage.min.js"></script>

  <script type="text/javascript">       
    $(document).ready(function () {
      $("#TestButton").click(function(){
        jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
      });
    });
  </script>
</head> 

<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>

Code on myserver.com/some_html_page.htm:

...
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.postMessage.min.js"></script>

  <script type="text/javascript">
    // you will need to set this dynamically, perhaps by having your
    // clients pass it into the URL of the iFrame,
    // e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
    var source_origin = "clients_page.com/index.html"; 

    var messageHandler = function (data) {
      // process 'data' to decide what action to take...
      alert("Hi");
    };

    $.receiveMessage(messageHandler, source_origin);
  </script>
</head>

Probably it would be nice to bundle the client code up into a single library that they could include, so your clients aren't burdened with writing their own javascript.

As a caveat, I wrote this code off the top of my head and it is likely be rife with typos. I have used this library before to accomplish similar goals, and I hope this answer is a useful jumping off point for you (along with the plugin documentation).

Let me know if I can clarify anything, and best of luck! :)

score 0 · Answer 2 · answered May 31 '12 at 08:26

You could try this jquery plugin from Ben Alman, providing you can have the plugin running on both yours, and your clients servers - see the examples for ways to execute js cross domain :

http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

score 0 · Answer 3 · edited May 31 '12 at 12:49

0

Lets consider if you have a function called test() which loads under Iframe, then you can access that test() function as below

document.getElementsByName("name of iframe")[0].contentWindow.functionName()

e.g.

document.getElementsByName("iframe1")[0].contentWindow.test()

edited May 31 '12 at 12:49

Yogu

9,165
5
37
58

answered May 31 '12 at 09:32

kannan

1
1

score -1 · Answer 4 · answered May 31 '12 at 06:50

-1

One of the common patterns of doing cross-domain requests, is using JSONP.

answered May 31 '12 at 06:50

Saeed Neamati

35,341
41
136
188

1

The question is about firing JavaScript functions in a frame, not fetching data from it. – Quentin May 31 '12 at 06:55

Cross Domain JavaScript Communication

4 Answers4