中级 iframe 支持 JavaScript API

此参考页面介绍了中间 iframe 支持 JavaScript API,该 API 可让您在后续用户体验中操控中间 iframe。

下表列出了所有可用的方法及其行为。

方法
verifyParentOrigin 执行父级来源验证
notifyParentClose 通知父框架 One Tap UX 流程已跳过
notifyParentDone 通知父框架 One Tap UX 流程已完成
notifyParentResize 通知父框架调整中间 iframe 的大小
notifyParentTapOutsideMode 当用户在父 iframe 之外点击时,通知父框架是否取消中间 iframe

加载中间 iframe 支持 JavaScript 库

将以下代码段放入您要加载中间 iframe 的所有 HTML 页面中:

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

方法:google.accounts.id.intermediate.verifyParentOrigin

google.accounts.id.intermediate.verifyParentOrigin 方法会执行父来源验证。请参阅该方法的代码示例:

google.accounts.id.intermediate.verifyParentOrigin(
    origins, verifiedCallback, verificationFailedCallback)

以下代码示例展示了如何仅在父源通过验证后显示界面:

<script>
  window.onload = () => {
    google.accounts.id.intermediate.verifyParentOrigin(
        "https://example.com", showUI, showError);
  };
</script>

下表列出了参数:

参数
origins 允许嵌入中间 iframe 的来源。
verifiedCallback 允许当前父级源站嵌入中间 iframe 时触发的 JavaScript 回调方法。
verificationFailedCallback 不允许当前父级来源嵌入中间 iframe 时触发的 JavaScript 回调方法。

出发地

允许嵌入中间 iframe 的来源。如需了解详情,请参阅下表:

类型 必需 示例
字符串、字符串数组或函数 选填 allowed_parent_origin: "https://example.com"

下表列出了受支持的值类型及其说明。

值类型
string 单个网域 URI。 &https://example.com
string array 网域 URI 数组。 &https://news.example.com,https://local.example.com"

验证回调函数

此字段是 JavaScript 回调方法,系统会在允许当前父级来源嵌入中间 iframe 时触发。

verificationFailedCallback 类的构造函数

此字段是一个 JavaScript 回调方法,会在当前父级来源不允许嵌入中间 iframe 时触发。

方法:google.accounts.id.intermediate.notifyParentClose

当跳过一键式用户体验流程时,google.accounts.id.intermediate.notifyParentClose 方法会通知父框架关闭中间 iframe。请参阅该方法的代码示例:

google.accounts.id.intermediate.notifyParentClose()

方法:google.accounts.id.intermediate.notifyParentDone

google.accounts.id.intermediate.notifyParentClose 方法会通知父框架关闭中间 iframe,并刷新登录状态。请参阅该方法的代码示例:

google.accounts.id.intermediate.notifyParentDone()

方法:google.accounts.id.intermediate.notifyParentResize

google.accounts.id.intermediate.notifyParentResize 方法会通知父框架调整中间 iframe 的大小。请参阅该方法的代码示例:

google.accounts.id.intermediate.notifyParentResize(height)

高度

以像素为单位的新高度。这是必填字段。该值必须是非负数。

如果高度参数大于 0,则中间 iframe 将设置为新高度。如果高度参数为 0,则中间 iframe 将不可见。隐藏的 iframe 未关闭。稍后,可以通过另一个调整大小方法调用进行显示。

方法:google.accounts.id.intermediate.notifyParentTapOutsideMode

当用户点击中间 iframe 时,google.accounts.id.intermediate.notifyParentTapOutsideMode 方法会通知父框架是否取消中间 iframe。请参阅该方法的代码示例:

google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)

取消

此必需布尔值用于指明,当用户点击中间 iframe 时,是否取消中间 iframe。