Question

我有一个表单（它只是一个用于电子商务购物车的模拟器html中的表单，因为我还没有实现购物车。它只是键入SKU，名称，价格，数量等，并发布到结账屏幕）我希望当我点击一个按钮时，页面会将它的信息发布到fancybox，我可以在其中导航。

到目前为止，我设法使用Garland在此question上的帖子，通过结帐（登录屏幕）的fancybox第一页接收帖子，但每当我继续使用该流程时，登录系统，它在主窗口打开。

我遇到的问题是我似乎无法在iframe上打开fancybox，因此我在登录后失去控制权，关闭了fancybox。

我的部分HTML：

<form target="Popup" action="../Account/LogOn" method="post" name="form1" id="form1"> 
    <div style="float: left; width: 500px; left: 50%; top: 20px; margin-left: -250px; position: absolute;">
        <div style="float: left; width: 100%; height: auto; margin-top:20px; text-align:center">
            .
            .
            .
            <input type="button" value="regular purchase" onclick="javascript: SendForm();" style="width:150px; height:30px; font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif; font-size: 10pt; vertical-align: middle" /> 
            <input type="submit" value="lightbox purchase" style="width:180px; height:30px; font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif; font-size: 10pt; vertical-align: middle" />
        </div>
    </div>
</form>

我的代码：

$("#form1").ajaxForm({
        success: function (responseText) {
            $.fancybox({
                type: 'iframe',
                content: responseText,
                fitToView: false,
                width: '70%',
                height: '70%',
                autoSize: true,
                closeClick: false,
                openEffect: 'elastic',
                closeEffect: 'fade',
                helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.65)' } } },
                afterClose: function () {
                    location.reload();
                    return;
                }
            });
        }
    });

此代码打开一个包含登录页面的fancybox，但不在iframe中，只是普通的div。任何人都有想法解决这个问题吗？

不幸的是，由于我还在进行早期开发，所以我没有链接向你们展示，到目前为止它都是本地主机。

Answer 1

正如我在之前的评论中推荐的那样，基于this example，使用fancybox的iframe回调在success参数中创建afterShow，如：

success: function(responseText) {
  $.fancybox.open({
    content   : '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
    width     : '70%',
    height    : '70%',
 // fitToView: false, 
    autoSize: false,
    closeClick: false,
    openEffect: 'elastic',
    closeEffect: 'fade',
    helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.65)' } } },
    afterShow : function() {
      var oIframe = document.getElementById('myFrame');
      var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument );
      iframeDoc.open(); 
      iframeDoc.write(responseText);
      iframeDoc.close();
    },
    afterClose: function () {
      location.reload();
      return;
    }
  }); // fancybox
} // success

请参阅实施的WORKING DEMO。提交表单后（也在fancybox内），responseText现在位于iframe内（我在响应中包含了一些链接，因此您可以继续在fancybox中导航）

从表单帖子打开iframe上的fancybox

1 个答案: