本教程旨在解决在HTML页面中使用
理解Iframe 404错误与相对路径解析
在开发过程中，我们常会遇到需要在一个HTML页面中嵌入其他HTML内容的需求，例如将多个报告合并到一个概览页面中。<iframe>标签是实现这一功能的常用手段。然而，当使用相对路径指定<iframe>的src属性时，有时会遇到HTTP ERROR 404 Not Found的错误，尤其是在将这些HTML文件部署到Web服务器（如Jenkins内置的Jetty服务器）上时。
问题场景分析
假设我们有一个父级HTML文件（overview.html），它包含两个<iframe>，分别用于嵌入两个子报告页面（Session_20Data_20for_20Overview_20Report/index.html和Runs_20Data_20for_20Overview_20Report/index.html）。文件结构如下：
--top directory
----Overview
------overview.html
----Session_20Data_20for_20Overview_20Report
------index.html
----Runs_20Data_20for_20Overview_20Report
------index.htmloverview.html中的<iframe>配置如下：
<html>
<head>
<title>regression report</title>
</head>
<body>
<iframe
style="width: 100%; height: 300px"
src="../Session_20Data_20for_20Overview_20Report/index.html"
></iframe>
<iframe
style="width: 100%; height: 1000px"
src="../Runs_20Data_20for_20Overview_20Report/index.html"
></iframe>
</body>
</html>在某些环境下（例如直接在文件系统打开或在Linux环境的Jenkins上），这种配置可能正常工作。但在另一些环境下（如Windows环境的Jenkins），却可能在<iframe>中显示HTTP ERROR 404 Not Found，错误信息可能指向URI: /static-files/Session_20Data_20for_20Overview_20Report/index.html，并提示由Stapler和Jetty提供服务。
根源分析：Web服务器与相对路径
这个问题的核心在于Web服务器如何解析和提供文件。当一个HTML页面通过Web服务器（如Jenkins内置的Jetty服务器）被访问时，页面中所有相对路径的资源（包括<iframe>的src）都是相对于服务器的根目录或当前请求的URL路径来解析的，而不是相对于文件系统中的物理路径。
错误信息中的URI: /static-files/...和SERVLET: Stapler、Powered by Jetty明确指出，页面是通过一个Web服务器（Jenkins使用Stapler作为其Web框架，底层通常是Jetty）来提供服务的。这意味着服务器正在尝试从其配置的Web根目录下去寻找/static-files/Session_20Data_20for_20Overview_20Report/index.html这个路径。
如果服务器并没有将Session_20Data_20for_20Overview_20Report和Runs_20Data_20for_20Overview_20Report这两个目录配置为可从/static-files/路径下访问的资源，那么即使这些文件在文件系统中的相对位置是正确的，服务器也无法找到它们，从而返回404 Not Found错误。在Jenkins的场景下，报告通常存储在工作空间的特定路径下，并通过Jenkins自身的URL结构来访问，例如http://jenkins-host/job/your-job/ws/path/to/report/index.html。
解决方案：采用完全限定URL
解决<iframe>中404错误的有效方法是使用完全限定URL（Fully Qualified URL），即提供资源的完整HTTP或HTTPS路径。
如何构建完全限定URL
在Jenkins等Web服务器环境中，你需要确定你的报告文件实际是通过哪个URL路径对外提供的。通常，Jenkins会将构建工作空间中的文件通过特定的URL模式暴露出来。例如，如果你的Jenkins Job名为MyRegressionJob，并且报告文件位于工作空间的Session_20Data_20for_20Overview_20Report/index.html，那么其完全限定URL可能类似于：
http://your-jenkins-host:port/job/MyRegressionJob/ws/Session_20Data_20for_20Overview_20Report/index.html
其中：
- your-jenkins-host:port 是你的Jenkins服务器地址和端口。
- /job/MyRegressionJob/ws/ 是Jenkins暴露工作空间内容的标准路径模式。
示例代码
修改overview.html中的<iframe>的src属性，使用完全限定URL：
<html>
<head>
<title>regression report</title>
</head>
<body>
<iframe
style="width: 100%; height: 300px"
src="http://your-jenkins-host:port/job/MyRegressionJob/ws/Session_20Data_20for_20Overview_20Report/index.html"
></iframe>
<iframe
style="width: 100%; height: 1000px"
src="http://your-jenkins-host:port/job/MyRegressionJob/ws/Runs_20Data_20for_20Overview_20Report/index.html"
></iframe>
</body>
</html>注意： 请将http://your-jenkins-host:port/job/MyRegressionJob/ws/替换为你的实际Jenkins服务器地址、端口和Job名称。
通过这种方式，浏览器会直接向指定的URL发起请求，绕过了服务器对相对路径的误解析，从而能够正确地加载嵌入的内容。
重要注意事项与最佳实践
1. 服务器配置与文件暴露
确保你的Web服务器（例如Jenkins）被正确配置，以便能够通过HTTP请求访问到这些报告文件。在Jenkins中，通常构建的工作空间内容会自动通过/ws/路径暴露。如果报告文件位于Jenkins之外的某个位置，你可能需要配置Web服务器（如Nginx, Apache）来代理或直接服务这些文件。
2. 跨域请求安全（CORS）
在原始问题中提到了一个警告：“Due to Cross Origin Request Security(CORS), this browsing mode is now deprecated. Use Detachable Report Mode instead.”
尽管404错误是由于路径解析问题导致的，但CORS是一个与<iframe>紧密相关的安全机制。如果<iframe>的src指向的资源与父页面不在同一个“源”（协议、域名、端口三者之一不同），浏览器会触发CORS策略，可能阻止内容的加载或限制脚本交互。
- 同一源策略： 当父页面和<iframe>内容都由同一个Web服务器在同一个域名和端口下提供时，通常不会有CORS问题。
- Jenkins的“可分离报告模式”： 警告中提到的“Detachable Report Mode”是Jenkins为了更好地处理报告而提供的功能，它可能以一种规避CORS或提供更安全、更灵活的方式来查看报告。如果可能，建议探索和使用Jenkins提供的报告查看机制。
3. 本地文件路径（file://）的局限性
虽然理论上可以使用file:///C:/path/to/report/index.html这样的本地文件路径作为src，但这通常不推荐用于Web应用。现代浏览器出于安全考虑，对file://协议的访问权限有严格限制，并且可能无法在不同操作系统或用户之间通用。此外，它也无法在Web服务器环境下工作。
4. 环境差异（Windows vs. Linux）
为什么在Linux环境下可能工作，而在Windows环境下却失败？这可能与Jenkins在不同操作系统上处理文件路径、启动Web服务器的方式，或默认的安全沙箱配置有关。例如，在某些Linux系统上，Jenkins可能更容易直接访问文件系统路径，或者其内部的URL映射机制在Linux上表现得更宽松。然而，依赖这种平台差异性是不稳定的，使用完全限定URL是更健壮的解决方案。
总结
当在Web服务器环境下使用<iframe>嵌入内容时遇到HTTP ERROR 404 Not Found，通常是由于相对路径解析与服务器的实际文件暴露路径不匹配所致。通过将<iframe>的src属性修改为完全限定URL，可以直接指示浏览器从正确的HTTP地址加载资源，从而有效解决问题。同时，开发者应关注CORS等安全策略，并根据实际部署环境，选择最合适的报告展示和管理方案。
