How to share jQuery .data() data through iframe's?

Question

I'm trying to share jQuery data from one or more iframe'd html pages with their parent html document. What I need is an inter-iframe communication and if possible (highly desireble) to share/exchange .data() i.e. the $.cache of both jQuery objects (in the parent and child iframe).

Someting similar to this:

Parent html:

<!DOCTYPE html>
<html>
    <head>

        <title >iframe-data</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>


        <script type="text/javascript" >

            jQuery(function($){
                var testData = 'hello world from #div1';
                $('#div1').data('test',testData);
                var newTestData = $('.div2').closest('.div1').data('test');
                $('#div2').append( 'Parent window: "' + testData + '" === "' + newTestData + '" => ' + (testData === newTestData) );
            }); // jQuery()

        </script>
    </head>
    <body>

        <div id="div1" class="div1" >
            <div id="div2" class="div2" >
            </div>
            <iframe src="iframe-data2.html" ></iframe>
        </div>

    </body>
</html>

Iframe html:

<!DOCTYPE html>
<html>
    <head>

        <title >iframe-data2</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>


        <script type="text/javascript" >

            jQuery(function($){
                var testData = 'hello world from #div1';
                var $body = $(window.top.document.body);
                var $div1 = $body.find('#div1');
                var outsideTestData = $body.find('#div1').data('test');
                var $div2 = $('#div2');
                $div2.append( 'outside test data: "' + testData + '" === "' + outsideTestData + '" => ' + (testData === outsideTestData) );
            }); // jQuery()

        </script>
    </head>
    <body style="background-color: silver">

        <div id="div1" class="div1" >
            <div id="div2" class="div2" >
            </div>
        </div>

    </body>
</html>

What's the question? I'm taking it that your code doesn't work as you expect, but what happens instead? What do you need to know? — , Feb 09 '11 at 07:21
@Isaac It doesn't work at all, but thanks, I've tryied to clarify the question. I hope it helps. — Azder, Feb 09 '11 at 08:51
Just wondering: Are both the parent page and the iframe page provided via the same domain or are the located at different domains? If the are from different domains security policy might be/get an issue. — Benjamin Seiller, Feb 09 '11 at 10:10

score 2 · Accepted Answer · answered Feb 09 '11 at 09:45

jQuery object itself is created inside anonymous function and it uses closure for accessing global (global for other jQuery functions) array inside this functions. So, as result: jQuery in iframe and jQuery in the top window have different data array. If you need top level data, use window.top.jQuery('#div1').data('test1') (please note that default context for jQuery is document, where it was initially created, so using "top level jQuery" we don't need to specify top level document.

score 0 · Answer 2 · answered Feb 09 '11 at 08:56

0

Have a look at Ben Alman's jQuery postMessage plugin

answered Feb 09 '11 at 08:56

Gideon

18,251
5
45
64

How to share jQuery .data() data through iframe's?

2 Answers2