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值推入fancybox beforeLoad回調中的parentData 對象中，如下所示：

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

...這將為您帶來更大的靈活性恕我直言。

現在，您需要在iframed頁面中做的唯一事情就是在需要它們時將這些屬性分別稱為parent.parentData.nameid和parent.parentData.originalname ，例如

有這個html（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 ：

根據此答案，您可以執行以下操作：

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，並隨時瀏覽兩個頁面的源代碼。