CloudRun 上托管的 iframe 未在 React JS 中触发 onLoad 事件

Question

我在网页中嵌入了一个 iframe。有时 iframe 需要一段时间才能加载，有时会立即加载。我想在加载 iframe 时显示旋转的轮子动画。我正在使用

onLoad

事件，但它似乎根本没有触发。我的调试消息从未被记录，并且旋转动画无休止地显示。我做错了什么以及检测 iframe 何时加载的可靠方法是什么？

我正在使用 React + next.js + tailwind css。

'use client'
import { useState, useEffect } from 'react';

const GradioPage = () => {
  const [loading, setLoading] = useState(true);
  const demoUrl = 'https://mydemo';

  return (
    <div className="mt-24 flex justify-center items-center h-screen">
      {loading && (
        <div className="flex justify-center items-center w-full h-full">
          <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
        </div>
      )}
      <iframe
        src={demoUrl}
        className={`w-full h-full ${loading ? 'hidden' : ''}`}
        title="Gradio Demo"
        onLoad={() => {console.log("LOADED"); setLoading(false);}}
      ></iframe>
    </div>
  );
};

附注

• 这似乎与我的显示逻辑无关，因为如果我在一定的超时后手动将加载设置为 false，旋转轮就会消失并且 iframe 会出现。
• 我正在 Chrome 中测试
• 我无法控制 iframe 内容

更新：iframe 是托管在 GCP CloudRun 上的应用程序。 CloudRun 配置为缩减至 0 个节点，因此如果一段时间内没有发出请求，容器将被释放并下次冷启动。调试显示 onLoad 在冷启动时始终触发，但后续加载不会触发该事件。确认这与浏览器缓存无关，因为问题发生在隐身窗口和具有清除缓存的浏览器中。所以问题似乎与CloudRun有关。

既然我可以控制 CloudRun 配置，是否可以更改一些内容以使其在 onLoad 上持续触发或使用其他方法来可靠地检测 iframe 何时加载？

Answer 1

你可以尝试下面的链接并检查一下吗？我没有对加载器动画进行任何CSS更改，我只是从顺风复制粘贴了代码，所以你可以更改它。关于它不起作用的原因，可能是您没有使用正确的嵌入链接，这不会让 onload 事件触发。

代码沙盒