iframe onLoad 事件在 React JS 中未触发

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 内容

Answer 1

您可以尝试以下链接并查看一下吗？

代码沙盒