recaptcha没有在firefox和safari中显示

时间：2016-12-06 22:52:09

标签： firefox safari recaptcha

我在Firefox中显示reCaptcha时遇到问题（Ver 50.0.2）and Safari browsers(Ver 9.1).它在IE和Chrome中显示正常。我使用的代码是google recaptcha文档中的示例代码。我将以下示例代码保存到html文件中（并将其命名为myReCaptcha.html）。我已经替换了＆＃34; my_own_site_key＆＃34;用我自己的网站密钥。我尝试用这个链接显示它＆＃34; 127.0.0.1/myReCaptcha.html"。它在IE和Chrome中显示得很好，但在Firefox和Safari中却没有。请帮忙。谢谢。

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="my_own_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

P.S. Here is what I see in the Chrome browser. But I can't see it in Firefox.

2 个答案:

答案 0 :(得分：0)

显然，这是一个已知问题，其中包含https:版本的小部件。这个演示在Firefox中正常运行

https://secure.jotformpro.com/form/50145268709963 

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/json+oembed" href="https://www.jotform.com/oembed/?format=json&amp;url=http%3A%2F%2Fwww.jotform.com%2Fform%2F50145268709963" title="oEmbed Form"><link rel="alternate" type="text/xml+oembed" href="https://www.jotform.com/oembed/?format=xml&amp;url=http%3A%2F%2Fwww.jotform.com%2Fform%2F50145268709963" title="oEmbed Form">
<meta property="og:title" content="Google - Recaptcha demo" >
<meta property="og:url" content="http://www.jotformpro.com/form/50145268709963" >
<meta property="og:description" content="Please click the link to complete this form.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<title>Google - Recaptcha demo</title>
<link href="https://cdn.jotfor.ms/static/formCss.css?3.3.15949" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.15949" />
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.15949" />
<style type="text/css">
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    body, html{
        margin:0;
        padding:0;
        background:false;
    }

    .form-all{
        margin:0px auto;
        padding-top:20px;
        width:690px;
        color:#555 !important;
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
        font-size:14px;
    }
</style>

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.15949" type="text/javascript"></script>
<script src="https://js.jotform.com/vendor/postMessage.js?3.3.15949" type="text/javascript"></script>
<script src="https://js.jotform.com/WidgetsServer.js?v=1481065067325" type="text/javascript"></script>
<script type="text/javascript">
   JotForm.init(function(){
      setTimeout(function() {
          $('input_5').hint('ex: myname@example.com');
       }, 20);
    JotForm.clearFieldOnHide="disable";
    JotForm.onSubmissionError="jumpToFirstError";
   });
</script>
</head>
<body>
<form class="jotform-form" action="https://submit.jotformpro.com/submit/50145268709963/" method="post" name="form_50145268709963" id="50145268709963" accept-charset="utf-8">
  <input type="hidden" name="formID" value="50145268709963" />
  <div class="form-all">
    <ul class="form-section page-section">
      <li class="form-line" data-type="control_textbox" id="id_4">
        <label class="form-label form-label-left form-label-auto" id="label_4" for="input_4"> Name </label>
        <div id="cid_4" class="form-input jf-required">
          <input type="text" class=" form-textbox" data-type="input-textbox" id="input_4" name="q4_name" size="20" value="" />
        </div>
      </li>
      <li class="form-line jf-required" data-type="control_email" id="id_5">
        <label class="form-label form-label-left form-label-auto" id="label_5" for="input_5">
          E-mail
          <span class="form-required">
            *
          </span>
        </label>
        <div id="cid_5" class="form-input jf-required">
          <input type="email" class=" form-textbox validate[required, Email]" id="input_5" name="q5_email5" size="30" value="" />
        </div>
      </li>
      <li class="form-line jf-required" data-type="control_widget" id="id_6">
        <label class="form-label form-label-left form-label-auto" id="label_6" for="input_6">
          Recaptcha
          <span class="form-required">
            *
          </span>
        </label>
        <div id="cid_6" class="form-input jf-required">
          <div style="width:100%; text-align:Left;">
            <iframe onload="widgetFrameLoaded(6)" frameborder="0" scrolling="no" allowTransparency="true" data-type="iframe" class="custom-field-frame" id="customFieldFrame_6" src="" style="border:none;width:310px;height:85px;" data-width="310" data-height="85">
            </iframe>
            <div class="widget-inputs-wrapper">
              <input id="input_6" class="form-hidden form-widget widget-required " type="hidden" name="q6_recaptcha" value="" />
              <input id="widget_settings_6" class="form-hidden form-widget-settings" type="hidden" value="%5B%7B%22name%22%3A%22theme%22%2C%22value%22%3A%22light%22%7D%2C%7B%22name%22%3A%22fallback%22%2C%22value%22%3A%22false%22%7D%5D" data-version="2" />
            </div>
            <script type="text/javascript">
            setTimeout(function()
{
  var _cFieldFrame = document.getElementById("customFieldFrame_6");
  _cFieldFrame.src = "//dev-data-widgets.jotform.io/kenneth/noCaptchaRecaptcha/?qid=6&ref=" + encodeURIComponent(window.location.protocol + "//" + window.location.host);
  _cFieldFrame.addClassName("custom-field-frame-rendered");
}, 0);
            </script>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_button" id="id_2">
        <div id="cid_2" class="form-input-wide">
          <div style="margin-left:156px;" class="form-buttons-wrapper">
            <button id="input_2" type="submit" class="form-submit-button" data-component="button">
              Submit
            </button>
          </div>
        </div>
      </li>
      <li style="display:none">
        Should be Empty:
        <input type="text" name="website" value="" />
      </li>
    </ul>
  </div>
  <input type="hidden" id="simple_spc" name="simple_spc" value="50145268709963" />
  <script type="text/javascript">
  document.getElementById("si" + "mple" + "_spc").value = "50145268709963-50145268709963";
  </script>
  <script src="https://cdn.jotfor.ms/js/widgetResizer.js?REV=3.3.15949" type="text/javascript"></script>
</form></body>
</html>

答案 1 :(得分：0)

经过几天的挣扎，我想我想到了为什么会这样。我正在我公司的内部网上运行reCpatcha。在我的FF中，* .google.com的证书显示为我公司发布的。因此，如果我在公司的内部网上运行reCaptcha代码，我就不会看到reCaptcha。但如果我在互联网上运行reCaptcha，我会看到它。因此，我公司的安全政策阻止了reCaptcha的出现。

相关问题
最新问题