中间 iframe API 参考文档

此参考页面介绍了中间 iframe API，该 API 用于使用 iframe 将一键登录提示嵌入到网页中。

如需详细了解如何使用中间 iframe，请参阅使用 iframe 集成一键登录。

加载中间 iframe JavaScript 库

将以下代码段放置在您希望 Google One Tap 显示的任何 HTML 网页中：

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

您可以通过包含一个 ID 属性设置为 g_id_intermediate_iframe 的 HTML 元素来加载中间 iframe。请参阅以下示例代码段：

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

ID 为“g_id_intermediate_iframe”的元素

您可以将中间 iframe 数据属性放在任何可见或不可见元素中，例如 <div> 和 <span>。唯一的要求是将元素 ID 设置为 g_id_intermediate_iframe。请勿将此 ID 放在多个元素上。

下表列出了数据属性及其说明：

data-src

此属性是“一键登录”中间 iframe 的 URI。如需了解详情，请参阅下表：

data-done

此属性是一个 JavaScript 回调方法，在完成一键式用户体验时触发。

默认情况下，当一键登录用户体验完成时，内容页面会重新加载。您可以通过提供自己的完成回调来替换默认行为。如需了解详情，请参阅下表：

JavaScript API

您可以通过调用 JavaScript 方法来加载中间 iframe。

方法：google.accounts.id.initializeIntermediate

google.accounts.id.initializeIntermediate 方法会根据配置对象加载中间 iframe。请参阅以下方法代码示例：

google.accounts.id.initializeIntermediate(IntermediateConfig)

以下代码示例使用 onload 函数实现了 google.accounts.id.initializeIntermediate 方法：

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

数据类型：IntermediateConfig

下表列出了各个字段及其说明：

src

此字段是您的 One Tap 中间 iframe 的 URI。如需了解详情，请参阅下表：

完成

此字段是当一键登录界面完成时要触发的 JavaScript 回调方法。

默认情况下，当一键登录用户体验完成时，内容页面会重新加载。您可以通过提供自己的完成回调来替换默认行为。如需了解详情，请参阅下表：