解决HTML iframe 404错误：相对路径与完全限定URL的解析策略

本文探讨了在web环境中，特别是使用jenkins和jetty服务时，html页面中嵌套的iframe无法显示内容并报告404错误的问题。问题根源在于服务器对iframe `src` 属性中相对路径的解析不正确。文章详细阐述了通过将相对路径替换为完全限定url来解决此问题的方法，并提供了相关的实践建议和注意事项，以确保iframe内容正确加载。

iframe内容加载失败：404错误分析

在Web开发中，

问题现象

当一个包含

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服务器）在尝试根据其内部规则解析

潜在原因分析

1. 服务器根路径解析差异： 当HTML文件通过 file:// 协议在本地浏览器中打开时，相对路径是相对于当前HTML文件的物理位置进行解析的。然而，当文件通过 http:// 协议由Web服务器提供时，相对路径是相对于当前请求的URL路径进行解析的。服务器可能有一个不同的静态文件服务根目录或URL重写规则，导致 ../ 这样的相对路径无法正确映射到文件系统上的实际位置。
2. Jenkins/Jetty的静态资源处理： Jenkins（通过Stapler和Jetty）有其特定的方式来服务静态文件。错误信息中的 /static-files/ URI前缀暗示Jenkins可能尝试将请求映射到其内部的静态文件服务机制。如果
3. 部署环境差异： 在不同的操作系统（如Windows和Linux）或不同的部署配置下，服务器对路径的解析行为可能存在细微差异，导致在某些环境中工作正常，而在另一些环境中出现问题。

解决方案：使用完全限定URL

解决此类404错误最直接有效的方法是，将

立即学习“前端免费学习笔记（深入）”；

聚蜂消防BeesFPD

关注消防领域的智慧云平台

下载

实施步骤

1. 确定目标资源的完全限定URL： 首先，需要明确
2. 修改 将 overview.html 中

示例代码

假设 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 应修改为：

注意： 这里的 http://your-jenkins-instance/job/your-job/ws/ 需要替换为实际Jenkins实例上对应工作目录的基URL。

注意事项与最佳实践

1. 环境一致性： 确保在开发、测试和生产环境中，生成报告的URL路径保持一致，以便完全限定URL能够稳定工作。
2. CORS（跨域资源共享）： 如果
3. 动态生成URL： 如果报告的路径是动态变化的（例如包含会话ID或时间戳），在生成 overview.html 时，需要确保能够动态地构建出正确的完全限定URL。
4. 服务器配置检查： 如果确实希望使用相对路径，则需要深入检查Web服务器（Jenkins/Jetty）的配置，了解其如何处理静态文件和URL重写。可能需要调整Jenkins的静态文件服务配置或Jetty的上下文路径映射，以使其能够正确解析相对路径。
5. 安全性考虑： 使用完全限定URL通常更安全，因为它明确指定了资源的来源。但在某些情况下，如果内部资源不应被外部直接访问，则需要确保这些完全限定URL不会暴露敏感信息或导致未授权访问。

总结

当