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，允许外部事件更改iframe的src。用法如下所示

$('#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 来自带框架的框架 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>

在iframe内容上执行ajax替换时触发iframe onload事件

1 个答案: