Как поделиться данными jQuery .data () через iframe? - PullRequest
Новая
       18

Как поделиться данными jQuery .data () через iframe?

3 голосов
/ 09 февраля 2011

Я пытаюсь поделиться данными jQuery с одной или нескольких HTML-страниц iframe со своим родительским HTML-документом.Что мне нужно, так это межфреймовое взаимодействие и, если возможно (очень желательно), чтобы поделиться / обменяться .data (), т.е. $ .cache обоих объектов jQuery (в родительском и дочернем iframe).на это:

Родительский 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>

Ответы [ 2 ]

2 голосов
/ 09 февраля 2011

Сам объект jQuery создается внутри анонимной функции и использует замыкание для доступа к глобальному (глобальному для других функций jQuery) массиву внутри этих функций.Итак, как результат: jQuery в iframe и jQuery в верхнем окне имеют разные массивы данных.Если вам нужны данные верхнего уровня, используйте window.top.jQuery('#div1').data('test1') (обратите внимание, что контекстом по умолчанию для jQuery является документ, в котором он был изначально создан, поэтому при использовании «верхнего уровня jQuery» нам не нужно указывать документ верхнего уровня.

0 голосов
/ 09 февраля 2011

Взгляните на jQuery postMessage Бена Алмана плагин

...