克服为js/css/xml文件创建子目录引起的问题答案

【问题标题】：Overcoming problems caused by creating subdirectories for js/css/xml files克服为js/css/xml文件创建子目录引起的问题
【发布时间】：2011-08-16 01:42:51
【问题描述】：

我一直在做一个网站，在我的电脑上使用 html、css、js 和 xml 文件（还没有上线）。我有一个图像文件夹，但否则将所有文件保存在同一个文件夹中。随着工作的进行，事情开始变得有些混乱，所以我创建了 css、js 和 xml 文件夹，并仔细更新了我所有的 html、css 和 js 代码。我立即遇到了“访问受限 URI 被拒绝代码：1012”错误，讨论了here、here、and here。按照最后一个链接中的建议，我将该站点移至我的本地主机服务器。这似乎解决了 1012 错误，但我似乎仍然遇到其他错误（我的 js 代码似乎在访问 html 元素时遇到问题）。不说太具体，将网站文件移动到子目录有哪些问题和相应的解决方案？

【问题讨论】：

查看这个，似乎虽然1012错误消失了，但我的js代码仍然无法读取XML文件。我已经尝试了来自 js 目录 (../xml/myXMLfile.xml) 和 html (./xml/myXMLfile.xml) 的路径。
你能把你的代码放到 jsFiddle 中，然后把链接发回去，这样我们就可以看到它了。这很可能只是一个路径问题，但如果不看代码就很难诊断。 jsfiddle.net
希望得到一个“通用”的答案，而不是特定于我的代码。起初我认为问题可能是相对路径应该相对于 js “链接”到的 html 文件。然后我想到了目录权限问题。不知道 jsfiddle——看起来是一个很好的资源。不过现在病了，工作过度了，所以稍后再调查......

标签： javascript html css xml

【解决方案1】：

与将文件移动到子文件夹相关的问题。

CSS 中包含的图像与 CSS 文件的位置相关。
JavaScript 对其他文件的引用是相对于页面位置的。

我整理了一些东西来演示

演示： http://wecodesign.com/demos/stackoverflow-7072742.htm

【讨论】：

"JavaScript 对其他文件的引用是相对于页面位置的。"说得通。您不希望 ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js 处的 js 代码具有相对于该位置的引用！我将不得不重新检查这是否是问题所在。

【解决方案2】：

根据我个人的经验，多个文件夹总是会产生问题。

您可以从您的代码中创建模块并将每个模块的所有公共资源放在同一个文件夹组中，但只有在真正的大型项目中才值得这样做（我们说的是雅虎、亚马逊，在这里输入 scale）。

如果它如此复杂，多个文件夹将使事情变得更加困难。保持文件夹结构简单，降低代码复杂度。

【讨论】：

我并不同意。不过，我确实认为，就像拥有“images”文件夹通常很好一样，“css”、“js”和“xml”文件夹也很有意义。我想，如果我可以对我的代码进行排序，我会接受 Patric 的回答，如果没有，那就是你的。
抱歉写得不是很好——你应该为每种类型的资源只有一个文件夹。查看 HTML5 Boilerplate - 任何 Web 项目的非常好的基础。

【解决方案3】：

将样式表移动到css 文件夹时，只需将./css/ 添加到所有css links 中hrefs 的前面。还要在 css 文件中所有图像 URL 的前面添加 ../。将 javascripts 移动到 js 文件夹是类似的，只需在所有 js links 中的 hrefs 前面添加 ./js/ 即可。将.xmls 移动到xml 文件夹可能会更复杂。由于 1012 错误，您需要将您的站点移动到服务器上，如果它还没有在一个服务器上。然后您需要检查您的 js 代码并将./xml/ 添加到您的 xml 引用的开头。如果您做得很好，您将拥有一个名为 function openXMLfile(xmlFileName) 之类的函数，因此您只需更改一行：xmlhttp.open("GET", xmlFileName+".xml", false); 到 xmlhttp.open("GET", "./xml/"+xmlFileName+".xml", false); 感谢其他答案和 cmets。帮助。点赞。

【讨论】：