本文探讨了在web环境中，特别是使用jenkins和jetty服务时，html页面中嵌套的iframe无法显示内容并报告404错误的问题。问题根源在于服务器对iframe `src` 属性中相对路径的解析不正确。文章详细阐述了通过将相对路径替换为完全限定url来解决此问题的方法，并提供了相关的实践建议和注意事项，以确保iframe内容正确加载。
iframe内容加载失败：404错误分析
在Web开发中，<iframe> 元素常用于在一个HTML页面中嵌入另一个独立的HTML文档。然而，开发者有时会遇到 <iframe> 内容无法正确显示，并伴随“HTTP ERROR 404 Not Found”错误的情况。这通常发生在当父页面（如 overview.html）通过Web服务器（如Jenkins内置的Jetty服务器）提供服务时，而 <iframe> 的 src 属性使用了相对路径来引用其内容。
问题现象
当一个包含 <iframe> 的HTML页面被部署到Web服务器上，并通过 http:// 或 https:// 协议访问时，如果 <iframe> 的 src 属性指向一个相对路径，并且该路径无法被服务器正确解析，就会出现404错误。典型的错误信息会显示：
HTTP ERROR 404 Not Found URI: /static-files/Session_20Data_20for_20Overview_20Report/index.html STATUS: 404 MESSAGE: Not Found SERVLET: Stapler Powered by Jetty:// 9.4.46.v20220331
这表明服务器（在此例中是Jenkins的Stapler Servlet和Jetty服务器）在尝试根据其内部规则解析 <iframe> 的相对路径时，未能找到对应的资源。尽管文件系统上的相对路径看起来是正确的，但服务器的URL解析逻辑可能与预期不符。
潜在原因分析
- 服务器根路径解析差异： 当HTML文件通过 file:// 协议在本地浏览器中打开时，相对路径是相对于当前HTML文件的物理位置进行解析的。然而，当文件通过 http:// 协议由Web服务器提供时，相对路径是相对于当前请求的URL路径进行解析的。服务器可能有一个不同的静态文件服务根目录或URL重写规则，导致 ../ 这样的相对路径无法正确映射到文件系统上的实际位置。
- Jenkins/Jetty的静态资源处理： Jenkins（通过Stapler和Jetty）有其特定的方式来服务静态文件。错误信息中的 /static-files/ URI前缀暗示Jenkins可能尝试将请求映射到其内部的静态文件服务机制。如果 <iframe> 的相对路径与此机制不兼容，或者目标文件不在Jenkins预期的静态文件目录中，就会导致404。
- 部署环境差异： 在不同的操作系统（如Windows和Linux）或不同的部署配置下，服务器对路径的解析行为可能存在细微差异，导致在某些环境中工作正常，而在另一些环境中出现问题。
解决方案：使用完全限定URL
解决此类404错误最直接有效的方法是，将 <iframe> 的 src 属性中的相对路径替换为完全限定URL（Fully Qualified URL）。完全限定URL包含了协议、域名、端口以及完整的资源路径，从而消除了服务器在解析相对路径时可能遇到的歧义。
立即学习“前端免费学习笔记（深入）”；
实施步骤
- 确定目标资源的完全限定URL： 首先，需要明确 <iframe> 想要加载的实际HTML文件（例如 index.html）在Web服务器上的完整URL。这通常可以通过在浏览器中直接访问这些报告页来获取。例如，如果 overview.html 位于 http://your-jenkins-instance/job/your-job/ws/Overview/overview.html，并且 Session_20Data_20for_20Overview_20Report/index.html 位于 http://your-jenkins-instance/job/your-job/ws/Session_20Data_20for_20Overview_20Report/index.html，那么这就是所需的完全限定URL。
- 修改 <iframe> 的 src 属性： 将 overview.html 中 <iframe> 的 src 属性更新为这些完全限定URL。
示例代码
假设 Session_20Data_20for_20Overview_20Report/index.html 和 Runs_20Data_20for_20Overview_20Report/index.html 在Jenkins工作区的完全限定URL分别为：
- http://your-jenkins-instance/job/your-job/ws/Session_20Data_20for_20Overview_20Report/index.html
- http://your-jenkins-instance/job/your-job/ws/Runs_20Data_20for_20Overview_20Report/index.html
那么 overview.html 应修改为：
<html>
<head>
<title>regression report</title>
</head>
<body>
<iframe
style="width: 100%; height: 300px"
src="http://your-jenkins-instance/job/your-job/ws/Session_20Data_20for_20Overview_20Report/index.html"
></iframe>
<iframe
style="width: 100%; height: 1000px"
src="http://your-jenkins-instance/job/your-job/ws/Runs_20Data_20for_20Overview_20Report/index.html"
></iframe>
</body>
</html>注意： 这里的 http://your-jenkins-instance/job/your-job/ws/ 需要替换为实际Jenkins实例上对应工作目录的基URL。
注意事项与最佳实践
- 环境一致性： 确保在开发、测试和生产环境中，生成报告的URL路径保持一致，以便完全限定URL能够稳定工作。
- CORS（跨域资源共享）： 如果 <iframe> 加载的内容与父页面不在同一个域（协议、域名、端口任一不同），浏览器可能会触发CORS安全策略，阻止内容的加载。虽然本例中的404错误是路径解析问题，但原始问题描述中提及的CORS警告（"Due to Cross Origin Request Security(CORS), this browsing mode is now deprecated."）是一个重要的提示。如果使用完全限定URL后仍然遇到加载问题，应检查目标资源的服务器是否配置了正确的CORS头部（例如 Access-Control-Allow-Origin）。
- 动态生成URL： 如果报告的路径是动态变化的（例如包含会话ID或时间戳），在生成 overview.html 时，需要确保能够动态地构建出正确的完全限定URL。
- 服务器配置检查： 如果确实希望使用相对路径，则需要深入检查Web服务器（Jenkins/Jetty）的配置，了解其如何处理静态文件和URL重写。可能需要调整Jenkins的静态文件服务配置或Jetty的上下文路径映射，以使其能够正确解析相对路径。
- 安全性考虑： 使用完全限定URL通常更安全，因为它明确指定了资源的来源。但在某些情况下，如果内部资源不应被外部直接访问，则需要确保这些完全限定URL不会暴露敏感信息或导致未授权访问。
总结
当 <iframe> 在Web服务器环境下出现404错误时，首先应考虑服务器对 src 属性中相对路径的解析问题。通过将相对路径替换为完全限定URL，可以有效绕过服务器的路径解析歧义，确保 <iframe> 内容能够被浏览器正确加载。同时，也应关注CORS等潜在的安全策略，以确保Web应用的稳定性和安全性。
