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

Question

我有一个在域 A 上托管的信用卡付款表单的视图。域 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 知道有事发生了。

另一种解决方案是以某种方式将自定义事件绑定到 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>