如何通过 iframe 共享 jQuery .data() 数据？答案

【问题标题】：How to share jQuery .data() data through iframe's?如何通过 iframe 共享 jQuery .data() 数据？
【发布时间】：2011-02-09 04:53:39
【问题描述】：

我正在尝试将来自一个或多个 iframe 的 html 页面的 jQuery 数据与其父 html 文档共享。我需要的是 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>

【问题讨论】：

有什么问题？我认为您的代码没有按您预期的那样工作，但是会发生什么呢？你需要知道什么？
@Isaac 它根本不起作用，但是谢谢，我已经尝试澄清这个问题。我希望它有所帮助。
只是想知道：父页面和 iframe 页面是通过同一个域提供的，还是位于不同的域？如果来自不同域的安全策略可能/得到问题。

标签： javascript jquery html iframe jquery-data

【解决方案1】：

jQuery 对象本身是在匿名函数内部创建的，它使用闭包来访问此函数内部的全局（其他 jQuery 函数的全局）数组。因此，结果：iframe 中的 jQuery 和顶部窗口中的 jQuery 具有不同的数据数组。如果您需要顶级数据，请使用window.top.jQuery('#div1').data('test1')（请注意，jQuery 的默认上下文是文档，它最初是在其中创建的，因此使用“顶级 jQuery”我们不需要指定顶级文档。

【讨论】：

【解决方案2】：

看看 Ben Alman 的 jQuery postMessage 插件

【讨论】：