1

AJAX API 経由で reCAPTCHA を使用して、モーダル ダイアログ ボックスにキャプチャを表示しています。ボックスを表示するために jqModal を使用しています。PHP バージョンは jqModal で既にバグがあるため、reCAPTCHA の AJAX バージョンを使用しています (既知のバグ: http://markmail.org/message/bvip5vyb3czm7ngu )。

現在、reCAPTCHA は Firefox で正常に動作します。ただし、Safari では常に表示されるとは限りません。正常に動作することもありますが、約 20% の場合、reCAPTCHA ボックスが表示されません。

jqModal 宣言は次のようになります。

$().ready(function() {
  $('#modalBox_register').jqm({
  ajax: '/modals/register.php',
  trigger: 'a#registerButtonLink',
  onShow: function(h) {
   h.w.css('opacity', 1.00).fadeIn(300);
   },
  onHide: function(h) {
   h.w.fadeOut(300, function() { if (h.o) h.o.remove(); });
   }
 });
});

モーダル ボックス内の HTML/PHP は次のようになります。

<div id="registerModal">
 <p class="caption">Registration form:</p>
 <form name="registerForm" id="modalRegisterForm" class="modalForm" action="/register/" method="post">

   <table cellspacing="15" border="0">
    <tr>
     <td class="left"><label for="firstName">First Name:</label></td>
     <td class="right"><input type="text" name="firstName" id="firstName" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="lastName">Last Name:</label></td>
     <td class="right"><input type="text" name="lastName" id="lastName" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="email">Email Address:</label></td>
     <td class="right"><input type="text" name="email" id="email" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="password">Password:</label></td>
     <td class="right"><input type="password" name="password" id="password" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="passwordConfirm">Confirm Your Password:</label></td>
     <td class="right"><input type="password" name="passwordConfirm" id="passwordConfirm" value="" class="registerModalTextField" /></td>
    </tr>

    <tr>
     <td class="left">&nbsp;</td>
     <td class="right"><div id="termswrap">
      <input id="terms" type="checkbox" name="terms" />
               <label id="lterms" for="terms">&nbsp;I have read and accept the <a href="/backmatter/termsofuse/">Terms of Use.</a><br /></label>
              </div><!-- /#termswrap --></td>
    </tr>


    <!-- reCAPTCHA -->
    <tr>
     <td class="left"><label for="captcha">Are you human?</label></td>
     <td class="right"><!-- Using the reCAPTCHA AJAX API, because the non-AJAX API is buggy with jqModal -->
     <div id="recaptcha_div"></div>
     <script type="text/javascript"
      src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script> <script
      type="text/javascript">
          Recaptcha.create("123456789...",
           "recaptcha_div", {
             theme: "white"
          });
         </script>

     </td>
    </tr>


    <tr>
     <td class="left">&nbsp;</td>
     <td class="right"><input type="image" id="submitButton" src="/images/modals/button_register.png" value="Submit" alt="Submit" name="submit" /></td>
    </tr>
   </table>


 </form>
</div><!--/#registerModal-->

reCAPTCHA AJAX 呼び出しが Safari で適切に機能しない理由を知っている人はいますか?

4

1 に答える 1

1

Safariはタグを再レンダリングするときにjavascriptを再実行すると思います。また、ダイアログが開いたときに、モーダル ダイアログ内のすべてが再レンダリングされます。さらに、再レンダリングされた後、recaptcha で使用される document.write がどこにあるのか混乱してめちゃくちゃになっているのではないかと思います。いずれにせよ、これが私の問題を解決したものです：

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

「captcha-form」は、キャプチャを含むフォームの ID です。スクリプト タグを削除して、jQuery がスクリプトを移動した後に Safari がそれらを再レンダリングするときに、スクリプトが 2 回実行されないようにします。スクリプトによって作成されたイベント ハンドラーは script タグに含まれていないため、存続します。

于 2011-06-10T13:20:30.193 に答える