在 React 应用中动态插入 iframe 时，若使用相对路径（如 "viewpage.html"），浏览器会基于当前页面 URL（如 http://localhost:3000/）自动解析为绝对路径，导致 iframe 加载自身页面。正确做法是使用以 / 开头的根相对路径（root-relative path），确保始终从应用部署根目录解析资源。
在 react 应用中动态插入 iframe 时，若使用相对路径（如 `"viewpage.html"`），浏览器会基于当前页面 url（如 `http://localhost:3000/`）自动解析为绝对路径，导致 iframe 加载自身页面。正确做法是使用以 `/` 开头的**根相对路径**（root-relative path），确保始终从应用部署根目录解析资源。
当你在 React 项目中通过 JavaScript 动态设置 iframe.src（例如 display.innerHTML = '...'），且 src 值为 viewpage.html（无前导 /），浏览器会将其视为当前路径下的相对路径。由于 React 开发服务器（如 Vite 或 Create React App）默认运行在 http://localhost:3000/，该路径被解析为 http://localhost:3000/viewpage.html —— 而该地址往往由前端路由接管（如 React Router），最终渲染的是当前应用首页，造成“iframe 嵌套自身”的现象。
✅ 正确解决方案：使用根相对路径（也称“站点根路径”）
将 src="viewpage.html" 改为 src="/viewpage.html"（注意开头的 /）：
display.innerHTML = ` <iframe id="externalFrame" src="/viewpage.html" style="width:80%; height:700px;" title="External content"></iframe> <br><button class="button color" onclick="sendSelected();">Finish</button> `;
? 关键说明：
-
/viewpage.html表示从 Web 服务器的根路径（即http://localhost:3000/或生产环境域名根目录）开始查找，而非当前路由路径； - 确保
viewpage.html文件实际位于你项目的public/目录下（Create React App）或src/public//assets/对应静态资源目录（Vite 等），因为只有public/下的文件会被直接映射到根路径（如http://localhost:3000/viewpage.html）； - 若使用 Vite，也可将文件放在
public/下，访问方式不变；若用 Webpack 自定义配置，请确认output.publicPath与静态资源服务路径一致。
⚠️ 注意事项：
- ❌ 不要使用本地绝对路径（如
C:\project\viewpage.html）：违反同源策略，现代浏览器会直接拒绝加载，且无法部署； - ❌ 避免跨域 iframe：若
viewpage.html需独立部署在另一域名或端口（如http://localhost:5173/viewpage.html），需确保目标页设置Access-Control-Allow-Origin或使用postMessage安全通信，但此时已不属于“防止 localhost 前缀”范畴； - ✅ 推荐结构（Create React App 示例）：
my-react-app/ ├── public/ │ ├── index.html │ └── viewpage.html ← 此处存放，即可通过 /viewpage.html 访问 ├── src/ │ └── App.js
? 部署友好性：该方案完全兼容生产环境。构建后（npm run build），/viewpage.html 将由 Web 服务器（如 Nginx、Apache 或 Vercel）直接提供静态服务，无需额外启动第二个服务，真正实现单仓库、单部署包交付。
