Web 页中的JavaScript相对路径_js相对路径读取文件-优快云博客

本文链接：https://blog.youkuaiyun.com/hongweigg/article/details/52795498

本文探讨了在不同浏览器中Web应用如何正确处理相对路径的问题。通过具体案例说明了IE与Firefox、Chrome等浏览器在解析相对路径上的差异，并提供了一种简单的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web应用中的Web页面常使用相对路径来进行服务端的访问，然而，不同的浏览器对相对路径的解析存在差异。

应用场景：

假设有如下目录：

|--upload

|--controller

|--upload.js

|--upload.jsp

|--data

|--list.txt

upload目录下有upload.jsp页面文件和一个controller文件夹，controller中包含upload.js脚本文件，Web页面upload.jsp使用了upload.js脚本文件。

data目录为数据目录，包含一个list.txt数据文件。

现在要在upload.js中访问data下的list.txt文件。

处理：

1、IE

相对路径以当前页面作为基准。

访问相对路径：../data/list.txt

2、Firefox、Chrome

相对路径以当前JS所在路径作为基准。

访问相对路径：../../data/list.txt

可以看到，要是实现正确地访问，在Firefox和Chrome浏览器中，需要多加一层向上的访问目录“../”。

实际应用中，可以针对不同的浏览器进行差异化处理：

 //其他浏览器对相对路径的解析不同,IE默认页面路径为当前路径，Chrome和Firefox以本JS文件为当前路径
 var url = the_server_uri;
 var explorer = navigator.userAgent;
 if (explorer.indexOf("MSIE") < 0) {
     url = "../" + url;
 }