NextJS中如何实现Iframe仅单次加载？

完全可以实现仅加载一次Iframe的需求，同时也能通过技巧避免包含Iframe的组件被销毁，下面是具体落地方法：

1. 核心思路：让Iframe脱离页面组件DOM树，全局挂载 #

React默认会在组件卸载时清除对应DOM节点，要让Iframe不被销毁，就得把它挂载到全局存在的DOM节点（比如document.body）上，通过控制display属性切换显示/隐藏，而非卸载组件。这里用React Portal实现：

步骤1：提前创建全局容器 #

在NextJS根组件中（Pages Router用_app.js，App Router用layout.js），添加承载Iframe的空容器：

// Pages Router - _app.js
function MyApp({ Component, pageProps }) {
  return (
    <>
      <div id="persistent-iframe-container" style={{ display: 'none', position: 'fixed', top: 0, left: 0, width: '100%', height: '100vh', zIndex: 100 }}></div>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

步骤2：在目标页面用Portal挂载Iframe #

在需要显示Iframe的页面组件中，创建Iframe实例并通过Portal挂载到全局容器，同时监听路由变化控制显示/隐藏，同步URL参数ID：

import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useRouter } from 'next/router';

const IframePage = () => {
  const iframeRef = useRef(null);
  const router = useRouter();
  const [currentPageId, setCurrentPageId] = useState('');

  // 初始化Iframe（仅执行一次）
  useEffect(() => {
    if (!iframeRef.current) {
      const iframe = document.createElement('iframe');
      iframe.src = 'https://your-app-x-url.com';
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      
      // 建立与Iframe的通信通道
      const handleIframeMessage = (e) => {
        // 务必验证来源，避免安全风险
        if (e.origin !== 'https://your-app-x-url.com') return;
        
        // 处理来自App X的消息，比如初始化完成通知
        if (e.data.type === 'APP_INITED') {
          const initialId = router.query.id;
          if (initialId) {
            iframe.contentWindow.postMessage({ type: 'SET_ID', id: initialId }, 'https://your-app-x-url.com');
            setCurrentPageId(initialId);
          }
        }
      };

      window.addEventListener('message', handleIframeMessage);
      iframeRef.current = iframe;
      document.getElementById('persistent-iframe-container').appendChild(iframe);

      // 清理函数：移除消息监听（Iframe本身保留）
      return () => {
        window.removeEventListener('message', handleIframeMessage);
      };
    }
  }, []);

  // 监听路由变化，控制Iframe显示/隐藏，同步ID参数
  useEffect(() => {
    const handleRouteChange = (url) => {
      const container = document.getElementById('persistent-iframe-container');
      const isOnTargetPage = url.includes('/your-iframe-page-path');
      
      // 显示/隐藏Iframe
      container.style.display = isOnTargetPage ? 'block' : 'none';

      // 同步最新ID到Iframe
      if (isOnTargetPage) {
        const newId = new URLSearchParams(url.split('?')[1]).get('id');
        if (newId && newId !== currentPageId) {
          setCurrentPageId(newId);
          iframeRef.current?.contentWindow.postMessage({ type: 'SET_ID', id: newId }, 'https://your-app-x-url.com');
        }
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    handleRouteChange(window.location.href);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router, currentPageId]);

  return (
    <div className="page-content">
      {/* 页面其他内容 */}
      {createPortal(
        <div style={{ display: 'none' }} />,
        document.getElementById('persistent-iframe-container')
      )}
    </div>
  );
};

export default IframePage;

2. 关于「强制React永不卸载组件」 #

React没有直接提供强制组件不卸载的API，但通过上述Portal方案，Iframe脱离了页面组件的DOM树，即使页面组件被卸载，Iframe依然存在于全局DOM中，相当于实现了“永不卸载”的效果。

如果使用NextJS App Router，也可尝试将Iframe放在根Layout中，通过路由判断显示/隐藏，但根Layout会在所有页面加载时存在，灵活性不如Portal方案。

关键注意事项 #

• 安全验证：传递消息时必须指定准确的origin，禁止使用*，防止恶意网站伪造消息
• 内存管理：Iframe会持续占用内存，需确保App X本身无内存泄漏问题
• 状态同步：路由返回目标页面时，要及时同步最新URL参数ID，避免Iframe内容与当前路由不一致

内容的提问来源于stack exchange，提问作者user5507535