Question

我很难在模态窗口中调用recaptcha。当我运行页面时它工作正常但是当我在模态窗口中调用它时它显示为空白。你能指导我做错了吗？

这是我在ajax页面中的代码 Main page
Ajax Page

PS。我正在为我的recaptcha使用自定义主题作为其响应 this is my fiddle

 <script type="text/javascript">
var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
};
</script>

<!-- Start Responsive reCAPTCHA -->

<div id="recaptcha_widget" style="display:none" class="recaptcha_widget">
    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect. Please try again.</div>

    <div class="recaptcha_input">
        <label class="recaptcha_only_if_image" for="recaptcha_response_field">Enter the words above:</label>
        <label class="recaptcha_only_if_audio" for="recaptcha_response_field">Enter the numbers you hear:</label>

        <input type="text" id="recaptcha_response_field" name="recaptcha_response_field">
    </div>

    <ul class="recaptcha_options">
        <li>
            <a href="javascript:Recaptcha.reload()">
                <i class="icon-refresh"></i>
                <span class="captcha_hide">Get another CAPTCHA</span>
            </a>
        </li>
        <li class="recaptcha_only_if_image">
            <a href="javascript:Recaptcha.switch_type('audio')">
                <i class="icon-volume-up"></i><span class="captcha_hide"> Get an audio CAPTCHA</span>
            </a>
        </li>
        <li class="recaptcha_only_if_audio">
            <a href="javascript:Recaptcha.switch_type('image')">
                <i class="icon-picture"></i><span class="captcha_hide"> Get an image CAPTCHA</span>
            </a>
        </li>
        <li>
            <a href="javascript:Recaptcha.showhelp()">
                <i class="icon-question-sign"></i><span class="captcha_hide"> Help</span>
            </a>
        </li>
    </ul>
</div>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=[[6LdrdOwSAAAAAJBvHd9s5lUjOSVMmXvg44xyb09t]"></script>
<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=[[6LdrdOwSAAAAAJBvHd9s5lUjOSVMmXvg44xyb09t]]" height="300" width="500" frameborder="0"></iframe><br>
    <textarea name="recaptcha_challenge_field"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

<!-- End Responsive reCAPTCHA-->

Answer 1

查看Recaptcha文档，看起来您必须使用Ajax API，而不是Ajex Recaptcha请求的常规API。您可以在标题Ajax API下的this page上找到有关它的更多详细信息。这样做，而不是加载单独的页面，可能是使它工作的更简单的方法。

Google有一个使用Ajax调用here的演示，并且使用模态窗口并不是很困难。

Answer 2

为了在模态中显示recaptcha，你应该在init函数中渲染recaptcha存在的元素，因为必须提前渲染模态以显示你的recapthca。例如：

在我的index.jsp中，我有一个模态模板：

<script type="text/ng-template" id="addBook.html">
    <div class="modal-header">
        <h3 class="modal-title" ng-show="updateFlag">Update Book</h3>
        <h3 class="modal-title" ng-show="!updateFlag">Add New Book</h3>
    </div>
    <div class="modal-body">
    <div ng-show="loading" class="loading"><img src="resources/images/loading.gif"></div>
     <form ng-show="!loading" name="bookForm" ng-init="renderRecaptcha()" ng-submit="submitForm(bookForm.$valid,book)" novalidate>
        <!-- ID -->
        <input type="hidden" name="id" class="form-control" ng-model="book.id">
        <!-- BOOKNAME --> 
        <div class="form-group" ng-class="{ 'has-error' : bookForm.bookName.$invalid && submitted }">
            <label>Book Name</label>
            <input type="text" name="bookName" class="form-control" ng-model="book.bookName" required>
             <p ng-show="bookForm.bookName.$invalid && submitted" class="help-block">Book name is required.</p>
         </div>

            <p ng-show="bookForm.author.$invalid && submitted" class="help-block">Author name is required.</p>
        </div>
        <div class="form-group" id="recaptcha">
        </div>
        <p ng-show="captchaMissing" class="help-block">Captcha required.</p>

        <!-- BUTTONS -->
        <button type="button" class="btn btn-sm btn-primary" ng-really-click="submitForm(bookForm.$valid,book)" ng-really-message="Do yo confirm to proceed?">Submit</button>
     </form>
    </div>

然后我在我的角度文件app.js中有一个init函数（当然，在相应的控制器中）：

$scope.renderRecaptcha = function (){
  grecaptcha.render('recaptcha', {
      'sitekey' : '6LcV-gETAAAAAN0Stl6BfUJvj18Ul4CW7HfdJGOf'
  });};

这里要注意的是，我有一个函数“renderRecaptcha”，它用recaptcha填充除法元素“recaptcha”，这个函数由ng-template的ng-init属性调用，用于角度模态窗口。

如何在基于ajax的模态窗口中显示recaptcha

2 个答案: