中级 iframe 支持 JavaScript API

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

如需了解如何使用中间 iframe,请参阅使用 iframe 集成一键快捷功能指南。

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

方法
verifyParentOrigin 执行父级来源验证
notifyParentClose 通知父框架跳过了一键式用户体验流程
notifyParentDone 通知父框架,一键式用户体验流程已完成
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”

ManagedCallback

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

verificationFailedCallback

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

方法: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。