Include a JavaScript library in a JSP file

Question

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.

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 :

  <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.

EDIT :

Answer 1

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:

<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. A <script> tag is a HTML tag that gets interpreted by the browser, not by the servlet container. So the browser sees that in the HTML then makes a new request to the server for the JavaScript file in the src attribute.

The src attribute is relative to the URL that the browser asked for, not to the path of the JSP on the server.

So as an example, let's say:

• The browser asks for a page at http://example.com/SomeWebApp/some-resource
• The servlet container internally forwards the request to a JSP at /WEB-INF/jsp/somepage.jsp
• The response sent to the browser contains the script tag <script type="text/javascript" src="./jsgl.min.js"></script> (as in your question)
• The browser sees the URL ./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 *. 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> . 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 . Note that this is missing the "/SomeWebApp" context path.

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:

<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). So the HTML response received by the browser will be (again, sticking with our example above):

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

The browser will now resolve that relative URL to the correct target.

__

*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

Answer 2

Static resources should be put outside the WEB-INF folder (as you would typically not allow web access to its content).

You could put the file under webapp/js/, then change your script import to:

<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.

Answer 3

Files in WEB-INF are inaccessible.

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