ReCAPTCHA v2无法在IE Compability View中运行

时间:2015-10-07 11:55:32

标签: asp.net-mvc recaptcha

我正在尝试在我的ASP MVC项目中使用recapatcha v2。客户端的计算机具有IE10 / IE11并在兼容性视图中显示所有内部网页,这导致重新计算不会按预期显示。

问题是它很少接受我的回答,即使它是正确的。它只是显示一个新的图像,但每隔一段时间我就会把它弄好。还有其他人经历过这个吗?

如果您在IE中启用了google.com的兼容性视图并访问the demo site,则可以尝试一下。

3 个答案:

答案 0 :(得分:3)

reCAPTCHA要求兼容性视图启用才能工作,请参阅:

https://support.google.com/recaptcha/?hl=en-GB#6223838

答案 1 :(得分:2)

您正在看到reCaptcha的后备。看来你必须连续得到两个正确的答案。然后,它会为您提供一个响应代码,您可以将其复制并粘贴到<textarea>元素中。

所以你可能遇到的是你没有连续两次reCaptchas正确。

You can test the fallback recaptcha by adding the fallback=true parameter to the JavaScript resource

<script src="https://www.google.com/recaptcha/api.js?fallback=true" async defer></script>

正如@Coulton recaptcha does not support IE compatibility mode.

所解释的那样

答案 2 :(得分:1)

reCaptcha在javascript中使用了一个名为querySelectorAll和querySelector的函数。兼容模式下的IE 11呈现为IE 7.0,IE 7.0及以下版本似乎没有函数querySelectorAll和querySelector,这就是它失败的原因。

现在,我正在使用.net webforms,因此您可能需要为MVC稍微调整一下,但这里是:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="reCaptcha.aspx.cs" Inherits="reCaptcha" %>

<!DOCTYPE html>
<script type="text/javascript">
    // this defines these functions if they don't exist.
    if (!document.querySelectorAll) {
        document.querySelectorAll = function (selectors) {
            var style = document.createElement('style'), elements = [], element;
            document.documentElement.firstChild.appendChild(style);
            document._qsa = [];

            style.styleSheet.cssText = selectors +
                '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
            window.scrollBy(0, 0);
            style.parentNode.removeChild(style);

            while (document._qsa.length) {
                element = document._qsa.shift();
                element.style.removeAttribute('x-qsa');
                elements.push(element);
            }
            document._qsa = null;
            return elements;
        };
    }

    if (!document.querySelector) {
        document.querySelector = function (selectors) {
            var elements = document.querySelectorAll(selectors);
            return (elements.length) ? elements[0] : null;
        };
    }
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js' type="text/javascript"></script>
<script src='https://www.google.com/recaptcha/api.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js' type="text/javascript"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>reCaptcha Test</title>

</head>
<body>
    <h1>reCaptcha Test</h1>
    <form id="frmResult" runat="server">  
    <div class="g-recaptcha" data-sitekey=""></div>
        <script type="text/javascript">
         function IeVersion() {
                    //Set defaults
                    var value = {
                        IsIE: false,
                        TrueVersion: 0,
                        ActingVersion: 0,
                        CompatibilityMode: false
                    };

                    //Try to find the Trident version number
                    var trident = navigator.userAgent.match(/Trident\/(\d+)/);
                    if (trident) {
                        value.IsIE = true;
                        //Convert from the Trident version number to the IE version number
                        value.TrueVersion = parseInt(trident[1], 10) + 4;
                    }

                    //Try to find the MSIE number
                    var msie = navigator.userAgent.match(/MSIE (\d+)/);
                    if (msie) {
                        value.IsIE = true;
                        //Find the IE version number from the user agent string
                        value.ActingVersion = parseInt(msie[1]);
                    } else {
                        //Must be IE 11 in "edge" mode
                        value.ActingVersion = value.TrueVersion;
                    }

                    //If we have both a Trident and MSIE version number, see if they're different
                    if (value.IsIE && value.TrueVersion > 0 && value.ActingVersion > 0) {
                        //In compatibility mode if the trident number doesn't match up with the MSIE number
                        value.CompatibilityMode = value.TrueVersion != value.ActingVersion;
                    }
                    return value;
                }
         var ie = IeVersion();
         var reCaptchaApi = "";

        $(document).ready(function () {
            $('.g-recaptcha').each(function (index, obj) {
            grecaptcha.render(obj, { 'sitekey': reCaptchaApi });
      });
      if (ie.CompatibilityMode) {
          // loading it twice makes it load in compatibility mode.
            $('.g-recaptcha').each(function (index, obj) {
                grecaptcha.render(obj, { 'sitekey': reCaptchaApi });
            });
        }
        });
    </script>
</form> 

</body>
</html>

这允许reCaptcha V-2以兼容模式加载。