从Fancybox弹出窗口中调用警报功能 - iFrame和同源策略

时间:2013-01-03 01:01:04

标签: javascript fancybox alert same-origin-policy

我有一个小提琴:

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中执行此操作。我无法弄明白我的生活如何让它发挥作用。

注意

请注意,问题自成立以来已发生变化,因此下面提到验证的答案不适用。

1 个答案:

答案 0 :(得分:0)

经过很多痛苦之后,我决定不使用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中弹出警告框。

这个解决方案的问题是:它可能仅限于我所在的同一个域,因此在生产中它可能无法正常工作。我跑了一个快速测试,似乎跨域工作,但我觉得它将来会给我带来麻烦......