模态窗口中的recaptcha（fancybox）答案

【问题标题】：recaptcha within modal window (fancybox)模态窗口中的recaptcha（fancybox）
【发布时间】：2010-08-30 18:46:41
【问题描述】：

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

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

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

有人在fancybox 中的表单上加载了recaptcha 吗？如果你能给我举个例子，会帮助我..

感谢您的帮助...

【问题讨论】：

标签： ruby-on-rails modal-dialog lightbox fancybox recaptcha

【解决方案1】：

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

【讨论】：

【解决方案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 会混淆它的位置并搞砸。

【讨论】：

【解决方案3】：

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

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

<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'
  });

【讨论】：

【解决方案4】：

在fancybox中通过ajax加载带有recaptcha的表单的简单解决方案。

<%= recaptcha_tags ajax: true %>

【讨论】：