I am trying to share jQuery data with one or more iframe'd html pages with their parent html document. I need an inter-iframe message and, if possible (very desirable) to share / exchange .data (), i.e. $ .cache of both jQuery objects (in parent and child iframe).
Similar to this:
Parent 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) );
});
</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) );
});
</script>
</head>
<body style="background-color: silver">
<div id="div1" class="div1" >
<div id="div2" class="div2" >
</div>
</div>
</body>
</html>
source
share