Fancybox（jQuery） - 將信息從父級傳遞給iframe和iframe回到父級

Question

我試圖在我的頁面上打開fancybox iframe。將一些基本信息傳遞給iframe。然後，我想讓iframe與其父母交談。

我傳遞填充NameID-1在整個靜態，但我真的想有這樣的可變如：var nameid=$(this).attr('nameid')

我只是不知道，因爲我是新來的Ajax如何將所有正確執行這個/ Javascript和與邏輯掙扎。

base.html文件

JS：

<script type='text/javascript'> 
//<![CDATA[ 
// Popup Function 
$(document).ready(function() { 
    $('a.openinformation').fancybox({ 
     openEffect: 'fade', 
     openSpeed: 500 //, 
    }); 
}); 
// Update from iFrame 
function setInformation(userText) { 
    $('#displayfield-nameid-1').html(userText); 
    $('#showhide-nameid-1').show(); 
} 
//]]> 
</script> 

HTML：

<div> 
    <a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a> 
</div> 

<div id ="showhide-nameid-1" style=" display:none; background:#0CF;"> 
    <p>Replacement Name: <span id="displayfield-nameid-1"></span></p> 
</div> 

Iframe.html的

JS：

<script type='text/javascript'> 
//<![CDATA[ 
// Start 
$(window).load(function() { 
    // When Loaded get going. 
    $(document).ready(function() { 
     $('a.doupdate').click(function() { 
      parent.setInformation($(this).text()); 
      parent.$.fancybox.close(); 
     }); 
     $('a.closeremove').click(function() { 
      parent.$('#showhide-nameid-1').hide(); 
      parent.$.fancybox.close(); 
     }); 
    }); 
}); 
//]]> 
</script> 

HTML

<p>The old name: $originalname;</p> 
<p>The id for this column is: $nameid</p> 

<p>Please select a new name:</p> 
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div> 
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div> 
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div> 

Answer 1

你提的問題可以分爲兩個部分跳水：

1. 如何從父頁面的數據（存儲在變量）傳遞到一個iframe（在的fancybox打開）
2. 如何在iframe中處理數據（和/或將這些數據存儲在變量中），然後在fancybox關閉時將這些值傳遞給父頁面。

1）。通過從父頁面的數據（的fancybox）IFRAME

我覺得你最好的選擇是你的所有數據對象存儲在一個單一的JavaScript，如：

var parentData = {}; 

...所以你可以通過一個單一的對象而不是幾個變量的iframe。然後你就可以到對象不同的屬性和值添加喜歡：

parentData.nameid  = "1"; 
parentData.originalname = "Mary Poppins"; 

...或更多，如果你需要這樣。

可能仍然需要靜態地傳遞信息，通過（HTML5）data屬性，如：

<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a> 

...和data值推入parentData對象的的fancybox beforeLoad回調中，如：

beforeLoad : function() { 
    parentData.nameid  = $(this.element).data("nameid"); 
    parentData.originalname = $(this.element).data("originalname"); 
} 

...這會給你更多的靈活性恕我直言。

現在，你需要在iframed網頁上做的唯一一件事就是指那些性能爲parent.parentData.nameid和parent.parentData.originalname你需要他們的時候，例如

有這個網站（Iframe.html的）

<p>The old name: <span id="originalname"></span></p> 
<p>The id for this column is: <span id="nameid"></span></p> 

...你可以使用這個腳本編寫父對象的值這樣的：

$("#nameid").text(parent.parentData.nameid); 
$("#originalname").text(parent.parentData.originalname); 

通知你不能做（如在php中）

<p>The old name: $originalname;</p> 

...所以我們使用<span>標籤來通過javascript寫入他們的內容。

---

2）。將數據從iframed頁面傳遞到父頁面。

你需要做的第一件事就是你的父頁面申報，一個對象存儲從iframe和處理功能的數據是這樣的：

var iframeData = {}; 
function setInformation(data) { 
    return iframeData = data; 
}; 

然後在iframed網頁上，你可以寫不同性質/值到iframeData對象並運行iframe中setInformation()功能（在父頁）的值傳遞到像父頁面：

$(".doupdate").on("click", function (e) { 
    e.preventDefault(); 
    iframeData.newname = $(this).find("span").text(); // set object property/value 
    parent.setInformation(iframeData); // pass it to parent page 
    parent.$.fancybox.close(); 
}); 

上面的代碼假設你有一個類似的HTML像

<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a> 

... 通知我包我想傳遞一個span標籤名稱。可選的，你可以在2 spans喜歡它分開：

<span class="fname">Mary</span><span class="lname">Smith</span> 

......和他們一樣分隔值寫：

iframeData.fname = $(this).find("span.fname").text(); 
iframeData.lname = $(this).find("span.lname").text(); 

對於清除按鈕，我只想重新初始化變量和密切的fancybox像

$('a.closeremove').on("click", function (e) { 
    e.preventDefault(); 
    iframeData = {}; // reset variable 
    parent.setInformation(iframeData); // pass it to parent page 
    parent.$.fancybox.close(); 
}); 

...和使用的fancybox afterClose像回調從自身父頁面執行父頁面的操作：

afterClose : function() { 
    if (objLength(iframeData) > 0) { 
     $('#displayfield-nameid-1').html(iframeData.newname); 
     $('#showhide-nameid-1').show(); 
    } else { 
     $("#displayfield-nameid-1").empty(); 
     $('#showhide-nameid-1').hide(); 
    } 
} 

... 通知如果iframeData對象的長度比0大我將只顯示選擇#showhide-nameid-1。正因爲如此，我需要一個函數來驗證對象的length：

基於this答案，你可以這樣做：

function objLength(iframeData) { 
    // ref https://stackoverflow.com/a/5533226/1055987 
    var count = 0, i; 
    for (i in iframeData) { 
     if (iframeData.hasOwnProperty(i)) { 
      count++; 
     } 
    } 
    return count; 
}; 

...這將返回對象的length 。

最後一個音符：

由於iframed網頁上指的是使用前綴parent父頁面，如果它開了一個iframe外面返回的js錯誤。您可能需要先驗證試圖從父頁像訪問數據來回/前如果iframed網頁上實際包含的iframe中：

if (window.self !== window.top) { 
    // the page is inside an iframe 
} 

見DEMO和感覺自由探索源這兩個頁面的代碼。