中级 iframe API 参考文档

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

加载中间 iframe JavaScript 库

将以下代码段添加到您希望通过 Google One“点按”功能显示的任何 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 回调方法。

data-src

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

类型 必需 示例
string 是 data-src="https://example.com/onetap_iframe.html"

数据完成

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

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

类型 必需 示例
函数 可选 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 可在一键式用户体验为其中一种时触发的 JavaScript 回调方法。

src

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

类型 必需 示例
string 是 src: "https://example.com/onetap_iframe.html"

完成

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

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

类型 必需 示例
函数 可选 done: onOneTapSuccess