如何通過iframe共享jQuery .data（）數據？

我試圖從一個或多個iframe'd html頁面與他們的父母html文檔共享jQuery數據。我需要的是一個inter-iframe通信，如果可能的話（高度願意）共享/交換.data（），即兩個jQuery對象（在父級和子級iframe中）的$ .cache。如何通過iframe共享jQuery .data（）數據？

成才與此類似：

父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>

來源

2011-02-09 Azder

什麼問題？我認爲你的代碼不能像你期望的那樣工作，但是會發生什麼呢？你需要知道什麼？ – 2011-02-09 07:21:58

jQuery對象被創建本身在匿名函數中，它使用閉包來訪問glob這個函數內部的al（全局用於其他jQuery函數）數組。因此，結果是：頂部窗口中的iframe和jQuery中的jQuery具有不同的數據數組。如果您需要頂級數據，請使用window.top.jQuery('#div1').data('test1')（請注意，jQuery的默認上下文是文檔，最初創建的位置是文檔，因此使用「頂級jQuery」我們不需要指定頂級文檔。

來源

2011-02-09 09:45:30 oryol

看一看本Alman的jQuery postMessage插件

來源

2011-02-09 08:56:10 Gidon

如何通過iframe共享jQuery .data（）數據？

回答

相關問題