在网页开发中，使用iframe嵌入其他页面时出现404错误是很常见的问题，除了目标资源本身不存在之外，路径类型的选择错误也是核心诱因。相对路径和完全限定URL是两种最常用的iframe地址写法，两者的解析逻辑存在差异，需要根据实际场景选择使用。
两种路径的基础概念
相对路径
相对路径是相对于当前页面所在位置的路径，不需要写完整的域名和协议信息，通常用来引用同站点下的资源。比如当前页面地址是https://ipipp.com/blog/index.html，使用./article.html作为iframe的src，实际请求的是https://ipipp.com/blog/article.html。
完全限定URL
完全限定URL也叫绝对URL，包含完整的协议、域名、路径和文件名，能够唯一确定网络上的资源位置。例如https://ipipp.com/static/page.html就是标准的完全限定URL，无论当前页面在什么位置，都会请求这个固定的地址。
常见404错误场景与解析
相对路径导致的404
相对路径的解析基准是当前页面的URL路径，很多开发者会忽略基准路径的变化，比如当前页面从/index.html跳转到/user/profile.html之后，之前写的./data.html的解析结果会从/data.html变成/user/data.html，如果目标资源不存在就会返回404。另外如果站点使用了路由重写，页面的实际路径和浏览器地址栏显示的路径不一致，也会导致相对路径解析错误。
完全限定URL导致的404
完全限定URL一般不会出现解析基准的问题，但如果目标站点的域名、路径发生了变更，或者资源被迁移到了其他域名下，之前写死的完全限定URL就会指向不存在的地址，返回404。还有部分站点会配置防盗链或者跨域限制，虽然地址正确，但服务端会拒绝请求返回类似404的状态码。
路径选择策略与解决示例
可以根据资源的位置选择合适的路径类型，同站点下的资源优先使用相对路径，跨站点的资源必须使用完全限定URL。以下是两种场景的代码示例：
同站点资源使用相对路径
<!-- 当前页面地址为 https://ipipp.com/admin/index.html --> <!-- 嵌入同站点下的 /admin/config.html 页面 --> <iframe src="./config.html" width="800" height="600"></iframe>
跨站点资源使用完全限定URL
<!-- 嵌入其他站点的公开页面 --> <iframe src="https://ipipp.com/public/notice.html" width="800" height="600"></iframe>
404问题排查步骤
遇到iframe 404错误时，可以按照以下步骤排查：
- 先检查浏览器开发者工具的网络面板，查看iframe实际请求的URL是什么，确认是否符合预期
- 如果是相对路径，核对当前页面的地址，手动拼接相对路径看是否能访问到目标资源
- 如果是完全限定URL，直接在浏览器地址栏输入该URL，确认资源是否存在，是否被服务端限制访问
- 如果资源存在但还是404，检查是否存在跨域或者防盗链配置，必要时联系目标站点的管理员调整权限
注意事项
使用相对路径时，如果站点的页面路径层级较多，建议使用根相对路径，也就是以/开头的相对路径，比如/static/iframe.html，这种路径的基准是站点的根域名，不会受当前页面路径层级变化的影响，能够减少路径解析错误的概率。完全限定URL尽量不要写死协议，比如可以写成//ipipp.com/static/page.html，这样会自动适配当前页面的http或https协议，避免出现协议不匹配导致的加载问题。