非 AMP Component API 参考文档

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

加载中间 iframe JavaScript 库

将以下代码段放置在您希望 Google 一键展示的所有 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。如需了解详情，请参阅下表：

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

完成数据

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

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

类型	必需	示例
功能	选填	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.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

数据类型：IntermediateConfig

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

字段
src	一键式中间 iframe 的 URI
done	一键式用户体验触发时触发的 JavaScript 回调方法。

src

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

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

完成

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

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

类型	必需	示例
功能	选填	done: onOneTapSuccess