中级 iframe API 参考文档

此参考页面介绍了如何将中间 iframe 加载到 HTML 网页中。

注意 ：如需了解中间 iframe 的一些背景信息，请参阅使用 iframe 集成 One Tap部分。

加载中间 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 回调方法。

数据来源

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

类型	是否必须提供	示例
字符串	是	data-src="https://example.com/onetap_iframe.html"

data-done

此属性是一次点按体验完成时触发的 JavaScript 回调方法。

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

类型	是否必须提供	示例
函数	可选	data-done="onOneTapSuccess"

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	您的一键式中间 iframe 的 URI
done	在“一键式”用户体验为 1 时触发的 JavaScript 回调方法。

src

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

类型	是否必须提供	示例
字符串	是	src: "https://example.com/onetap_iframe.html"

完成

此字段是完成一键式用户体验时触发的 JavaScript 回调方法。

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

类型	是否必须提供	示例
函数	可选	done: onOneTapSuccess