---
title: iframe 白屏：子页面比登录态先加载
author: 休言
date: 2024-08-06
url: https://www.fechuck.com/notes/2024-08-06-iframe-blank.html
---

# iframe 白屏：子页面比登录态先加载

- `iframe` 内嵌了一个需要登录态的页面，在 useEffect 里会请求接口获取登录态信息，登录信息是通过接口获取的，再通过 `postMessage` 传递给 `iframe` 中的页面。有时候会出现 `iframe` 白屏的问题，此时控制台并没有输出双方通信的打印信息。

- 问题原因：`iframe` 页面先加载了，但是该页面缺乏登录态，即使请求接口也拿不到数据，所以不会渲染任何内容，导致 `iframe` 白屏。当后面父级页面通过接口拿到登录信息后，再透传给 `iframe` 页面，时间上就晚了，此时子页面仍然处于白屏状态，也没有请求接口数据。问题点在于子页面没有及时收到父页面传递的消息，所以没有触发接口请求，值得注意的是子页面是 Vue 项目，事件监听放在了 created 钩子函数里。

- 解决方法：先调用接口获取登录信息，再渲染 `iframe`，在 `onload` 后发送消息。