在JSP文件中包含JavaScript库

Question

我正在尝试使用JSP文件中JavaScript库中的JavaScript函数在Web浏览器页面上显示结果，但似乎包含的内容无效。

我实际上将与该库相对应的.js文件放在WEB-INF文件夹中，并在JSP文件中添加了以下行以将其包括在其中：

  <script type="text/javascript" src="./jsgl.min.js"></script> 

我成功地在一个简单的HTML文件中使用了该库，这就是为什么我不明白为什么这行不通的原因。

编辑：

Answer 1

TLDR

将JS文件放在Web内容（而不是 WEB-INF）下的文件夹中，例如[WebContent] /js/jsgl.min.js，并在JSP中使用以下内容：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>

---

说明

JSP文件由服务器编译，然后进行处理以将数据（通常为HTML）发送回Web浏览器。 <script>标记是HTML标记，它由浏览器而不是servlet容器解释。 因此，浏览器会看到HTML中的内容，然后向服务器发出 src属性中的JavaScript文件的新请求 。

src属性是相对于浏览器要求的URL的，而不是相对于服务器上JSP的路径的。

因此，举个例子：

• 浏览器在http://example.com/SomeWebApp/some-resource请求页面
• Servlet容器在内部将请求转发到位于/WEB-INF/jsp/somepage.jsp的JSP。
• 发送到浏览器的响应包含脚本标记<script type="text/javascript" src="./jsgl.min.js"></script> （如您所问）
• 浏览器将看到URL ./jsgl.min.js并将其相对于其向服务器请求的URL进行解析（在本例中为http://example.com/SomeWebApp/some-resource注意没有尾随'/'），因此浏览器将从http://example.com/SomeWebApp/jsgl.min.js *请求JS文件。 这是因为script标记的src属性中的相对URL以“。”开头。

另一个答案建议将JS文件放在“ js”文件夹中，然后将脚本标签更改为<script type="text/javascript" src="/js/jsgl.min.js"></script> 。 使用与上述示例相同的原始页面URL，浏览器会将此src URL转换为http://example.com/js/jsgl.min.js 。 请注意，这缺少“ / SomeWebApp”上下文路径。

因此，最好的解决方案确实是将JS文件放在//js/jsgl.min.js之类的静态文件夹中，但在JSP脚本标记中使用以下内容：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>

JSP会将${pageContext.request.contextPath}位转换为当前上下文路径，从而使代码可移植（如果您使用其他上下文路径重新部署webapp，它将仍然有效）。 因此，浏览器收到的HTML响应将是（再次坚持上面的示例）：

<script type="text/javascript" src="/SomeWebApp/js/jsgl.min.js"></script>

现在，浏览器将把该相对URL解析为正确的目标。

__

*如果原始URL带有斜杠=，即http://example.com/SomeWebApp/some-resource/ ，则JS URL为http://example.com/SomeWebApp/some-resource/jsgl.min.js

Answer 2

静态资源应放在WEB-INF文件夹外部（因为通常不允许Web访问其内容）。

您可以将文件放在webapp / js /下，然后将脚本导入更改为：

<script type="text/javascript" src="/js/jsgl.min.js"></script>

除了好的做法之外，这还不错，因为它与JSP文件的位置无关。

Answer 3

Files in WEB-INF are inaccessible.

您可以将它们放在webapp下，然后尝试如上所述进行访问。