[英]Include a JavaScript library in a JSP file
I'm trying to use JavaScript functions from the a JavaScript library in my JSP file to display the result on a web-browser page, but it seems like the inclusion didn't work. 我正在尝试使用JSP文件中JavaScript库中的JavaScript函数在Web浏览器页面上显示结果,但似乎包含的内容无效。
I actually put the .js file corresponding to the library in the WEB-INF folder and added the following line in the JSP file to include it in it : 我实际上将与该库相对应的.js文件放在WEB-INF文件夹中,并在JSP文件中添加了以下行以将其包括在其中:
<script type="text/javascript" src="./jsgl.min.js"></script>
I successfully managed to use the library in a simple HTML file, that's why I don't understand why this doesn't work. 我成功地在一个简单的HTML文件中使用了该库,这就是为什么我不明白为什么这行不通的原因。
EDIT : 编辑:
TLDR TLDR
Put the JS file in a folder under web content (but not WEB-INF) like [WebContent]/js/jsgl.min.js, and use the following in the JSP: 将JS文件放在Web内容(而不是 WEB-INF)下的文件夹中,例如[WebContent] /js/jsgl.min.js,并在JSP中使用以下内容:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
Explanation 说明
JSP files are compiled by the server, then processed to send data (typically HTML) back to the web browser. JSP文件由服务器编译,然后进行处理以将数据(通常为HTML)发送回Web浏览器。 A
<script>
tag is a HTML tag that gets interpreted by the browser, not by the servlet container. <script>
标记是HTML标记,它由浏览器而不是servlet容器解释。 So the browser sees that in the HTML then makes a new request to the server for the JavaScript file in the src
attribute. 因此,浏览器会看到HTML中的内容,然后向服务器发出
src
属性中的JavaScript文件的新请求 。
The src attribute is relative to the URL that the browser asked for, not to the path of the JSP on the server. src属性是相对于浏览器要求的URL的,而不是相对于服务器上JSP的路径的。
So as an example, let's say: 因此,举个例子:
http://example.com/SomeWebApp/some-resource
http://example.com/SomeWebApp/some-resource
请求页面 /WEB-INF/jsp/somepage.jsp
/WEB-INF/jsp/somepage.jsp
的JSP。 <script type="text/javascript" src="./jsgl.min.js"></script>
(as in your question) <script type="text/javascript" src="./jsgl.min.js"></script>
(如您所问) ./jsgl.min.js
and resolves it relative to the URL it has asked the server for (which in this case was http://example.com/SomeWebApp/some-resource
- note there is no trailing '/') so the browser will request the JS file from http://example.com/SomeWebApp/jsgl.min.js
*. ./jsgl.min.js
并将其相对于其向服务器请求的URL进行解析(在本例中为http://example.com/SomeWebApp/some-resource
注意没有尾随'/'),因此浏览器将从http://example.com/SomeWebApp/jsgl.min.js
*请求JS文件。 This is because the relative URL in the script tag's src attribute starts with a '.'. Another answer suggested putting the JS file in a 'js' folder and changing the script tag to <script type="text/javascript" src="/js/jsgl.min.js"></script>
. 另一个答案建议将JS文件放在“ js”文件夹中,然后将脚本标签更改为
<script type="text/javascript" src="/js/jsgl.min.js"></script>
。 Using the same original page URL as in the example above, the browser would translate this src URL to http://example.com/js/jsgl.min.js
. 使用与上述示例相同的原始页面URL,浏览器会将此src URL转换为
http://example.com/js/jsgl.min.js
。 Note that this is missing the "/SomeWebApp" context path. 请注意,这缺少“ / SomeWebApp”上下文路径。
The best solution therefore is indeed to put the JS file in a static folder like /js/jsgl.min.js, but to use the following in the JSP script tag: 因此,最好的解决方案确实是将JS文件放在//js/jsgl.min.js之类的静态文件夹中,但在JSP脚本标记中使用以下内容:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
The JSP will translate the ${pageContext.request.contextPath}
bit into the current context path, making the code portable (if you redeploy the webapp with a different context path, it will still work). JSP会将
${pageContext.request.contextPath}
位转换为当前上下文路径,从而使代码可移植(如果您使用其他上下文路径重新部署webapp,它将仍然有效)。 So the HTML response received by the browser will be (again, sticking with our example above): 因此,浏览器收到的HTML响应将是(再次坚持上面的示例):
<script type="text/javascript" src="/SomeWebApp/js/jsgl.min.js"></script>
The browser will now resolve that relative URL to the correct target. 现在,浏览器将把该相对URL解析为正确的目标。
__ __
*If the original URL had a trailing slash = ie, was http://example.com/SomeWebApp/some-resource/
, the JS URL would be http://example.com/SomeWebApp/some-resource/jsgl.min.js
*如果原始URL带有斜杠=,即
http://example.com/SomeWebApp/some-resource/
,则JS URL为http://example.com/SomeWebApp/some-resource/jsgl.min.js
Static resources should be put outside the WEB-INF folder (as you would typically not allow web access to its content). 静态资源应放在WEB-INF文件夹外部(因为通常不允许Web访问其内容)。
You could put the file under webapp/js/, then change your script import to: 您可以将文件放在webapp / js /下,然后将脚本导入更改为:
<script type="text/javascript" src="/js/jsgl.min.js"></script>
In addition to being good practice, this is good as it is not relative to the location of the JSP file. 除了好的做法之外,这还不错,因为它与JSP文件的位置无关。
Files in WEB-INF are inaccessible.
您可以将它们放在webapp下,然后尝试如上所述进行访问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.