asp.net-mvc-2 - 对 iframe 内的内容进行 ajax 替换时触发 iframe onload 事件

Question

我有一个在域 A 上托管的信用卡付款表单的 View 。域 B 有一个单独的网站，其中包含指向域 A 上的信用卡表单的 iframe。

域 A 上的表单使用如下 ajax 表单:

<% using (Ajax.BeginForm("CreditCard", "Framed", new { id = Model.SID },
   new AjaxOptions()
   {
       HttpMethod = "POST",
       InsertionMode = InsertionMode.Replace,
       UpdateTargetId = "credit-card-wrapper",
       LoadingElementId = "loading-pane"
   }, 
   new { id = "new-creditcard-form" }))
{ %>

然后在域 b 上，我使用自定义 jquery 插件通过允许外部事件更改 iframe 的 src 来管理我的 iframe。用法如下所示

$('#myIframe').frameplugin('creditcard');

这会导致 iframe 将其 src 更改为信用卡页面。我还向 iframe 附加了一个 onload，如下所示:

$(this).bind('load', function () {
    var src = $(this).attr('src').toLowerCase();

    //do stuff based on url
});

我想做的是，当提交信用卡表单并完成替换时，我希望iframe内的文档触发iframe的onload事件，以便域b知道发生了一些事情。

另一个解决方案是以某种方式将自定义事件绑定(bind)到 iframe 并在框架文档中触发它们。我不确定这是否有效。有什么想法吗？

编辑:

我尝试使用从 iframe 到父级的事件触发器，但出现错误。

Unsafe JavaScript attempt to access frame with URL http://localhost:59905/Home/Framed from frame with URL http://localhost:27412/Framed/Index/. Domains, protocols and ports must match.

这是我的事件绑定(bind)

$(document).bind('success:myframe', function (event, referenceId) {
    //do something
});

这是来自框架页面的 javascript 调用。这是从 ajax.beginform 中的 OnSuccess 调用的

function paymentReceived() {
    var referenceNumber = $('#referenceNumber').text();
    $(top.document).trigger('success:myframe', referenceNumber);
}

Answer 1

我认为您只想将事件从 iFrame 传递到父窗口。如果我错了，请纠正我。

从你的 iFrame 中，你不能这样做吗？

$(document).ready(function() {
    parent.alertPageWithIFrameThatLoadIsComplete();
});

编辑: 让我再试一次。

这对我有用:

<script type="text/javascript">
    function oniframeLoad() {
     alert("Loaded!");
    }

    function changePage() {
     frames["my_iframe"].location.href = "http://google.com";
    }

    setTimeout(changePage, 2000);
</script>

<iframe onload="oniframeLoad()" name="my_iframe" id="my_iframe" src=""></iframe>