对 iframe 中的内容进行 ajax 替换时触发 iframe onload 事件

Question

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

域 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 更改为信用卡页面。我还像这样将 onload 附加到 iframe：

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

    //do stuff based on url
});

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

另一种解决方案是以某种方式将自定义事件绑定到 iframe 并在框架文档中触发它们。我不确定这如何/是否会起作用。有什么想法吗？

编辑：

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

不安全的 JavaScript 尝试访问 带有 URL 的框架 http://localhost:59905/Home/Framed 从带有 URL 的框架 http://localhost:27412/Framed/Index/。 域、协议和端口必须 匹配。

这是我的事件绑定

$(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>