我正在尝试从一个或多个 iframe 的 html 页面与其父 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>
最佳答案
jQuery 对象本身是在匿名函数内创建的，它使用闭包来访问此函数内的全局(其他 jQuery 函数的全局)数组。因此，结果是:iframe 中的 jQuery 和顶部窗口中的 jQuery 具有不同的数据数组。如果您需要顶级数据，请使用 window.top.jQuery('#div1').data('test1')(请注意 jQuery 的默认上下文是文档，它最初是在其中创建的，所以使用“顶级 jQuery”我们不需要指定顶级文档。
关于javascript - 如何通过 iframe 共享 jQuery .data() 数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4941435/