To working my static file (CSS, JS) I have to write absolute path like /AppName/templates/style/main.css
. Is there any solution, that I could write relative path like style/main.css
?
A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy.
If you do a lot of testing and move content frequently between domains, then relative links are the best solution. Absolute paths are more secure, protect content, and prevent duplicate pages. The main point is that the link format you prefer should be applied to all URLs on the site.
A relative path is a way to specify the location of a directory relative to another directory. For example, suppose your documents are in C:\Sample\Documents and your index is in C:\Sample\Index. The absolute path for the documents would be C:\Sample\Documents.
If your actual concern is the dynamicness of the webapp context (the "AppName" part), then just retrieve it dynamically by HttpServletRequest#getContextPath()
.
<head> <link rel="stylesheet" href="${pageContext.request.contextPath}/templates/style/main.css" /> <script src="${pageContext.request.contextPath}/templates/js/main.js"></script> <script>var base = "${pageContext.request.contextPath}";</script> </head> <body> <a href="${pageContext.request.contextPath}/pages/foo.jsp">link</a> </body>
If you want to set a base path for all relative links so that you don't need to repeat ${pageContext.request.contextPath}
in every relative link, use the <base>
tag. Here's an example with help of JSTL functions.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> ... <head> <c:set var="url">${pageContext.request.requestURL}</c:set> <base href="${fn:substring(url, 0, fn:length(url) - fn:length(pageContext.request.requestURI))}${pageContext.request.contextPath}/" /> <link rel="stylesheet" href="templates/style/main.css" /> <script src="templates/js/main.js"></script> <script>var base = document.getElementsByTagName("base")[0].href;</script> </head> <body> <a href="pages/foo.jsp">link</a> </body>
This way every relative link (i.e. not starting with /
or a scheme) will become relative to the <base>
.
This is by the way not specifically related to Tomcat in any way. It's just related to HTTP/HTML basics. You would have the same problem in every other webserver.
Just use <c:url>
-tag with an application context relative path.
When the value
parameter starts with an /
, then the tag will treat it as an application relative url, and will add the application-name to the url. Example:
jsp:
<c:url value="/templates/style/main.css" var="mainCssUrl" />` <link rel="stylesheet" href="${mainCssUrl}" /> ... <c:url value="/home" var="homeUrl" />` <a href="${homeUrl}">home link</a>
will become this html, with an domain relative url:
<link rel="stylesheet" href="/AppName/templates/style/main.css" /> ... <a href="/AppName/home">home link</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With