3

1 つ以上の iframe 化された html ページから jQuery データを親の html ドキュメントと共有しようとしています。私が必要とするのは、iframe 間通信であり、可能であれば (非常に望ましい) .data() を共有/交換することです。つまり、両方の jQuery オブジェクト (親と子の iframe 内) の $.cache です。

これに似たもの：

親 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>
4

2 に答える 2

2

jQuery オブジェクト自体は匿名関数内で作成され、この関数内でグローバル (他の jQuery 関数ではグローバル) 配列にアクセスするためにクロージャーを使用します。その結果、iframe の jQuery と上部ウィンドウの jQuery は異なるデータ配列を持ちます。トップレベルのデータが必要な場合は、使用しますwindow.top.jQuery('#div1').data('test1')(jQuery のデフォルトのコンテキストは、最初に作成されたドキュメントであるため、「トップレベルの jQuery」を使用すると、トップレベルのドキュメントを指定する必要がないことに注意してください。

于 2011-02-09T09:45:30.140 に答える
0

BenAlmanのjQuerypostMessageプラグインをご覧ください

于 2011-02-09T08:56:10.310 に答える