当前位置：首页 > React

react 路由实现iframe

2026-01-27 01:06:56React

使用 React Router 实现 iframe 嵌入

在 React 应用中结合 React Router 实现 iframe 嵌入，可以通过动态路由参数控制 iframe 的 src 属性。以下是具体实现方法：

定义路由配置

在路由配置中设置动态参数，用于传递 iframe 的 URL。假设使用 react-router-dom v6：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import IframePage from './IframePage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/iframe/:url" element={<IframePage />} />
      </Routes>
    </Router>
  );
}

创建 Iframe 组件

在 IframePage 组件中通过 useParams 获取路由参数，并解码 URL：

react 路由实现iframe

import { useParams } from 'react-router-dom';

function IframePage() {
  const { url } = useParams();
  const decodedUrl = decodeURIComponent(url);

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <iframe 
        src={decodedUrl} 
        width="100%" 
        height="100%" 
        frameBorder="0"
        title="embedded-content"
      />
    </div>
  );
}

URL 编码与导航

跳转到 iframe 页面时需要对 URL 进行编码，避免特殊字符破坏路由结构：

import { useNavigate } from 'react-router-dom';

function NavigationExample() {
  const navigate = useNavigate();
  const externalUrl = 'https://example.com';

  const handleNavigate = () => {
    navigate(`/iframe/${encodeURIComponent(externalUrl)}`);
  };

  return <button onClick={handleNavigate}>Open iframe</button>;
}

安全注意事项

使用 iframe 时需考虑以下安全措施：

react 路由实现iframe

添加 sandbox 属性限制权限，如 sandbox="allow-same-origin allow-scripts"
通过正则表达式验证 URL 白名单
避免直接渲染用户提供的未经验证 URL

动态高度处理

如果需要根据内容动态调整 iframe 高度，可添加事件监听：

useEffect(() => {
  const iframe = document.querySelector('iframe');
  const handleMessage = (event) => {
    if (event.data.type === 'iframeHeight') {
      iframe.style.height = `${event.data.height}px`;
    }
  };
  window.addEventListener('message', handleMessage);
  return () => window.removeEventListener('message', handleMessage);
}, []);

父页面与 iframe 内容需通过 postMessage 通信协调高度。