從Fancybox彈出窗口中調用警報功能-iFrame和同源策略

Question

我有一個小提琴：

http://jsfiddle.net/nicorellius/4vQ9S/

警報在放映開始時觸發，放映結束並關閉，但是綁定到按鈕單擊使我難以理解。

我有一個有效的fancybox彈出窗口。 它是一種形式：

HTML是一個簡單的表：

<form id="my-form" method="post" action="">
    <table>
        <tr>
            <td>
                <label for="name">Name</label></td>
                <input type="text" id="name" name="name">
            </td>
            <td>
                <input type="submit" value="Submit">
            </td>
        </tr>
    </table>
</form>

觸發fancybox的鏈接：

<a class="fancy-popup" href="test.html" data-fancybox-type="iframe">

我有一個簡單的腳本，它調用了一些函數：

$(document).ready(function() {

    function before_show() {
        alert("fancybox before show");
    }

    function after_show() {
        alert("fancybox after show");
    }

    function on_close() {
        alert("fancybox after close");
    }

    function alert_me() {
        $.fancybox.inner.find('iframe').contents().find('input.click-me').click(function() {
            alert("fancybox has been foiled!!!");
        });
    }

    $(".fancy-popup").fancybox({
        openSpeed     :    'slow',
        openEffect    :    'fade',
        minWidth      :    '200',
        minHeight     :    '100',
        maxWidth      :    '400',
        maxHeight     :    '150',
        scrolling     :    'no',
        beforeShow    :    before_show,
        afterShow     :    after_show,
        afterClose    :    on_close,
        //afterShow     :    alert_me
    });
});

我意識到由於相同的原始政策，我無法在iFrame中執行此操作。 我一生都想不出如何使它工作。

注意

請注意，該問題自問世以來已發生變化，因此以下涉及驗證的答案不適用。

Answer 1

經過一番痛苦之后，我決定不使用iFrame來重新進行此操作。 我以為iFrame是最好的選擇，但后來意識到至少在我目前的理解水平上，我錯了。 但是，使用此方法，我可以從fancyBox彈出窗口成功調用警報：

http://jsfiddle.net/nicorellius/d4KVs/

我想我也可以在這里使用現有的驗證。

這是已更改的HTML：

<a href="#test" class="fancy-popup">fancy link</a>

我將HTML放在一個位置，並使用現有的fancyBox技術對其進行引用。

但是，我並沒有放棄。 我一直在擺弄它，並找到了使用iFrame的解決方案。 不確定我到底做了什么，但是我設置了原始計划，並使用了腳本：

    function alert_me() {
        $.fancybox.inner.find('iframe').contents().find(
            'input.click-me').click(function() {
                alert("fancybox has been foiled!!!");
        });
    }

現在，警報框會在iFrame fancyBox中彈出。

此解決方案的作用是：它可能僅限於我所在的同一個域，因此在生產中它可能無法正常工作。 我進行了快速測試，它似乎可以跨域工作，但是我感覺這將來會給我帶來麻煩...