重新验证在引导程序 3 底部页面中显示空白

Question

我使用 bootstrap 3 登录页面并添加 recaptcha。现在在加载完成我的页面之前，我会在底部看到空白页面以加载 recaptcha。

验证码：

<script type="text/javascript">
                        var RecaptchaOptions = {
                            theme: 'custom',
                            custom_theme_widget: 'recaptcha_widget'
                        };
                    </script>
                    <div id="recaptcha_widget" style="display:none">
                        <div class="control-group">
                            <label class="control-label">reCAPTCHA</label>
                            <div class="controls"> <a id="recaptcha_image" href="#" class="thumbnail"></a>

                                <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="recaptcha_only_if_image control-label">Enter the words above:</label>
                            <label class="recaptcha_only_if_audio control-label">Enter the numbers you hear:</label>
                            <div class="controls">
                                <div class="input-append">
                                    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="input-recaptcha" /> <a class="btn" href="javascript:Recaptcha.reload()"><i class="icon-refresh"></i></a>
 <a class="btn recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><i title="Get an audio CAPTCHA" class="icon-headphones"></i></a>
 <a class="btn recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><i title="Get an image CAPTCHA" class="icon-picture"></i></a>
 <a class="btn" href="javascript:Recaptcha.showhelp()"><i class="icon-question-sign"></i></a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript" src="<?php echo $recaptcha_url; ?>">

                    </script>
                    <noscript>
                        <iframe src="<?php echo $recaptcha_noscript_url; ?>" height="300" width="500" frameborder="0"></iframe>
                        <br>
                        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                        <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                    </noscript>
        </form>
        <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"></script>
        <noscript>
            <iframe src="<?php echo $recaptcha_noscript_url; ?>" height="300" width="500" frameborder="0"></iframe>
            <br>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
        </noscript> 

如何解决这个问题？

DEMO（点击运行查看问题）Fiddle

图片：

Answer 1

如果您不获取并添加您的RECAPTCHA API Key，就会发生这种情况。