Question

我正在尝试通过fancybox中的ajax加载表单。它工作得很好，一切正常。

我使用了recaptcha（rails）插件并在表单上获得了验证码。现在，当fancybox加载时，它会被重定向到一个只有验证码的空白页面。

我认为这是iframe和模态窗口的一些问题？

是否有人在fancybox中的表单上加载了recaptcha？如果你能给我一个例子，我会帮助你。

感谢您的帮助...

Answer 1

我和fancybox有同样的问题。我使用recaptcha ajax API解决了它： https://developers.google.com/recaptcha/docs/display#AJAX

Answer 2

我有同样的问题，虽然只在Safari（也可能是Chrome）。它在Firefox中运行良好。它与Ruby无关（我使用Grails），所有jQuery弹出窗口都出现问题（我尝试过blockUI，SimpelModal和ThickBox）。

据我所知，由于某种原因，当jQuery在domtree中移动iframe（这就是ReCaptcha）时，Webkit决定将iframe内容加载为新页面。或者可以使用iframe内容替换页面内容。

我很确定这是一个Webkit错误，我不知道是否有可能修复。

修改：结果证明可以修复：

$('#captcha-form script').remove();

'captcha-form'是包含验证码的表单的id。删除脚本标记，以便在jQuery移动它们之后Safari重新呈现它们时第二次不执行脚本。脚本创建的事件处理程序不在脚本标记中，因此它们可以存活。

我认为Safari会在重新呈现标记时重新执行javascript。当对话框打开时，模态对话框中的任何内容都会重新呈现。此外，我怀疑在重新渲染之后，recaptcha使用的document.write对它的位置感到困惑并且混乱。

Answer 3

如果有人还在寻找一个简单的解决方案，我已经设法通过将其作为iframe调用来获得fancybox中的recaptcha

如果从类选择器中调用它：

<script>
$(document).ready(function() {
     $(".example").fancybox({
          fitToView   : true,
          autoSize    : false,
          openEffect  : 'elastic',
          closeEffect : 'elastic'
     });
});
</script>

然后在你的HTML

中

<a href="http://url.com/iframe" class="example fancybox.iframe>Captcha Fancybox</a>

或者，如果您以编程方式触发fancybox，请执行以下操作：

$.fancybox({
     width        : '520px',
     height       : '230px',
     autoSize     : false,
     openEffect   : 'elastic',
     closeEffect  : 'elastic',
     'href'       : 'http://www.url.cc',
     type         : 'iframe'
  });

Answer 4

通过fancybox中的ajax重新加载表单的简单解决方案。

<%= recaptcha_tags ajax: true %>

模态窗口内的recaptcha（fancybox）

4 个答案: