3

我正在尝试与它们的父 html 文档共享一个或多个 iframe 的 html 页面中的 jQuery 数据。我需要的是 iframe 间通信，如果可能（非常希望）共享/交换 .data() 即两个 jQuery 对象（在父 iframe 和子 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

看看 Ben Alman 的jQuery postMessage插件

于 2011-02-09T08:56:10.310 回答