How to Include a JavaScript in a Jsp Page

How include an external JS file in a JSP page

but when I running the application, the system behavior seems like no
script is running.

This is because the browser is unable to load the javascript 'index.js' from the specified location. If you open the browser console and go to the 'networks' tab, you will see 404 (resource not found) against it. You cannot specify a relative URL to a JavaScript in a JSP file that way.

You need to provide your folder structure (where index.js is located in your project) and how you have configured web.xml. But if you try the following, it will surely work:

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

And then keep the 'js' folder containing 'index.js' at the same level as 'WEB-INF'.

How to include a javascript in a jsp page

Files in WEB-INF are inaccessible.

Put angular.min.js and all other static assets at the top level of your war file. Or better yet in some nice folder like js/angular/angular.min.js at the top level.

Then do this

<script src="js/angular/angular.min.js"></script>

Depending on your needs you might want to consider serving your assets from a CDN, but that's another story altogether.

Include a JavaScript library in a JSP file

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 = i.e., was http://example.com/SomeWebApp/some-resource/, the JS URL would be http://example.com/SomeWebApp/some-resource/jsgl.min.js

How to Include JS file to all JSP pages at run time?

If you have used any technologies like tiles or common jsp pages like header footer then it will be one place you need to add. Otherwise no other way you will have to include the script tag in all Jsp pages if you have individual pages.

OR If you have any script file already included in all the file you include your js file in that JS file

how to include js library on jsp page?

Use Spring Tag Library to resolve the same, on your JSP page include the tag library and provide the folder path (where your js files are present) as value to <spring:url>, as follows:

JSP Page:

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!doctype html>
<html>
<head>
<spring:url value="/js/kurento-utils.js" var="kurentoUtils" />
<script src="${kurentoUtils}"></script>
</head>

In your Spring Configuration file add <mvc:default-servlet-handler /> to load *.js files.

springdispatcher-servlet.xml:

<mvc:default-servlet-handler />

And make sure your have spring-web and spring-webmvc dependencies in your classpath, mentioned below:

pom.xml:

<properties>
<spring.version>4.1.4.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
</dependencies>

how to link external js file in jsp

The below line fixed my problem:

<script src="<%request.getContextPath()%>/js/validation.js"></script>

How to import external js file in jsp

I too Faced a similar situation and what is did was saved my External Js file as Filename.jsp and imported that as follow's and it worked.

<script type="text/javascript" src="keybd.jsp">

Where keybd.jsp was keybd.js previously.

Note that my page and external js file are in the same directory.

How to include a JS file in a JSP page using Spring MVC

Path should be

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

Try to force cache refresh your browser (Ctrl+F5) after applying changes.

Can a jsp file hold javascript

I've just answered a similar question here:
https://stackoverflow.com/questions/25059168/java-websocket-client-in-jsp-possible/25059382#25059382

The generic answer is: JSP can contain anything that a regular HTML page can contain. JSP is an HTML extended with JSP tags that are processed on a server. After the JSP tags are processed and a response is generated there is no any difference between that response and a regular HTML.

So, the question really is where to store the java scripts in an HTML. I think, the cleanest way would be to put them to a separate file or files and then use a <script> tag with an 'src' attribute:

<script src="<java-script-url>"></script>

But in cases when java scripts are not that big and complicated, it's OK to include them to the page itself under <head> element of your page.



Related Topics



Leave a reply



Submit