本頁面由 Cloud Translation API 翻譯而成。

正在載入 reCAPTCHA

本文件說明載入 reCAPTCHA 指令碼標記的最佳做法。這項資訊適用於 reCAPTCHA v2 和 v3。

以非同步方式載入 reCAPTCHA

所有 reCAPTCHA 版本都能以非同步方式載入。非同步載入 reCAPTCHA 不會影響其識別可疑流量的功能。應付款項以便瞭解非同步指令碼的效能優勢通常建議使用非同步網域

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

載入 reCAPTCHA 時，請記住，您必須等到載入完成才能使用 reCAPTCHA。舉例來說，下列程式碼很可能會中斷：

<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
  // If reCAPTCHA is still loading, grecaptcha will be undefined.
  grecaptcha.ready(function(){
    grecaptcha.render("container", {
      sitekey: "ABC-123"
    });
  });
</script>

在某些情況下，調整指令碼順序即可防止競爭狀態。此外，您也可以加入載入 reCAPTCHA 的程式碼片段。如果使用 grecaptcha.ready() 可納入 API 呼叫，請加入下列程式碼片段來確保隨時都能呼叫 reCAPTCHA

<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
  // How this code snippet works:
  // This logic overwrites the default behavior of `grecaptcha.ready()` to
  // ensure that it can be safely called at any time. When `grecaptcha.ready()`
  // is called before reCAPTCHA is loaded, the callback function that is passed
  // by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
  // loaded.
  if(typeof grecaptcha === 'undefined') {
    grecaptcha = {};
  }
  grecaptcha.ready = function(cb){
    if(typeof grecaptcha === 'undefined') {
      // window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
      // configuration. By default, any functions listed in its 'fns' property
      // are automatically executed when reCAPTCHA loads.
      const c = '___grecaptcha_cfg';
      window[c] = window[c] || {};
      (window[c]['fns'] = window[c]['fns']||[]).push(cb);
    } else {
      cb();
    }
  }

  // Usage
  grecaptcha.ready(function(){
    grecaptcha.render("container", {
      sitekey: "ABC-123"
    });
  });
</script>

使用 v2 API 的網站可以改用 onload 回呼，因為 reCAPTCHA 載入完成時會執行 onload 回呼。必須先定義 onload 回呼，再載入 reCAPTCHA 指令碼

<script>
  const onloadCallback = function() {
    console.log("reCAPTCHA has loaded!");
    grecaptcha.reset();
  };
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>

如果無法以非同步方式載入 reCAPTCHA，強烈建議您為 reCAPTCHA 加入 preconnect 資源提示。這可將指令碼下載封鎖剖析器的時間長度。

使用資源提示

在文件的 <head> 中加入下列資源提示，將會縮短提供所用資源所需的時間 reCAPTCHA。preconnect 資源提示會指示瀏覽器建立及早與第三方來源產生連結

<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>

延遲載入

一般來說，reCAPTCHA 掌握的網頁內容越多，就越能判斷使用者動作是否合法。特別是使用不依賴使用者挑戰的 reCAPTCHA 版本時。因此，等到特定受限動作再載入 reCAPTCHA 發生 (例如提交表單) 時，我們通常不建議這麼做。