从表单发布在 iframe 上打开 fancybox答案

【问题标题】：Opening fancybox on an iframe from form post从表单发布在 iframe 上打开 fancybox
【发布时间】：2012-10-17 20:21:45
【问题描述】：

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

到目前为止，我设法使用 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;
                }
            });
        }
    });

这段代码打开了一个包含登录页面和所有内容的花式框，但不是在 iframe 中，只是普通的 div。任何人都有解决此问题的想法？

很遗憾，由于我仍处于早期开发阶段，因此我没有向你们展示它的链接，并且到目前为止都是本地主机。

【问题讨论】：

查看 Janis 在stackoverflow.com/a/11739627/1055987 的帖子，特别是第二个演示，它向您展示了如何创建 iframe（如果这有助于您解决问题，请不要忘记投票；）跨度>
来吧......它没有帮助你？ ...然后看我的答案。

标签： jquery fancybox fancybox-2

【解决方案1】：

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

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 的实现。提交表单后（也在花式框内）responseText 现在位于iframe 内（我在响应中包含了一些链接，以便您继续在花式框内导航）

【讨论】：