Spring MVC referencing absolute urls within JS and CSS files

Question

When you need to reference a resource file from a JSP file within SpringMVC you have to pass an absolute url for the resource, which is traditionally done with either <c:url ... or href="${pageContext.request.contextPath}/css/....

However, how do pass absolute urls within my CSS and JS files? In CSS this can be necessary at times you use a url for a property. In my JS files I may need to make an AJAX call to an absolute URL that I define somewhere. In both of these instances these URLS can change at different times, but Googling has not pointed me to the best way to handle cases like these. I wouldn't be above adding a new maven plugin or some other JS or CSS compiler to achieve this.

contextPath doesn't mean absolute url.

Shoaib Chikate
– Shoaib Chikate

2014-04-14 06:53:12 +00:00
Commented Apr 14, 2014 at 6:53 — Shoaib Chikate
– Shoaib Chikate, Commented Apr 14, 2014 at 6:53

JB Nizet · Accepted Answer · 2014-04-14 06:32:59Z

1

CSS URLs don't need to be absolute, because the URLs are not resolved relative to the path of the current page, but relative to the path of the CSS file itself.

For JS, you simply have to define, for example, the base URL in a global variable, from your base JSP template, and reuse that base URL from your JS files:

In your JSP:

<script>var BASE_URL = "<c:url value='/' />";</script>
<script src="someFile.js"></script>

In your JS file:

$('#foo').load(BASE_URL + 'some/path.html');

answered Apr 14, 2014 at 6:32

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nikole Over a year ago

CSS: okay, that makes sense. I didn't realize that I could use a relative path and make use of something like ../images/example.jpg. For JS: I've thought of doing that, while I'm not above it; it seems somewhat messy. I'll do it if push comes to shove, but I'd prefer not to. Is there any alternative?

JB Nizet Over a year ago

You could parse the current location somehow and deduce the base URL, if you're sure your app will always be deployed in a non-root context.

Nikole Over a year ago

I think I'll go with your original suggestion, it's clearly easier and probably more reliable. (It won't take much to implement either, as I can just do it within the header site-tile.) Mucho apreciado, amigo!

Collectives™ on Stack Overflow

Spring MVC referencing absolute urls within JS and CSS files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related