Is it possible to set multiple base URLs in a single HTML file?

Question

I have an HTML file that contains breadcrumb links and a Javascript file that fires AJAX calls.

The breadcrumb links are relative to the HTML page. The AJAX calls are relative to the webapp context-path.

So for example, if the current HTML page is http://host.com/context_path/companies/5/user/10/index.html (where "5" and "10" are arbitrary IDs I don't know ahead of time):

• I need to generate breadcrumb links to http://host.com/context_path/companies/5/
• I need to fire AJAX calls to http://host.com/context_path/

If I set <base href="http://host.com/context_path/"> then the AJAX calls work fine, but I have no way of resolving the breadcrumb links relative to the HTML page.

Is there any way for me to implement this using client-side relative links? Or am I forced to resolve the links on the server side?

Answer 1

Answering my own question:

While it is true that the <base> tag affects all relative links, it looks like location.href points to the original HTML page [1]. So what you can do is set the <base> tag to satisfy the AJAX calls, and set the breadcrumb links relative to location.href using Javascript code.

[1] While I can't find any mention of this in the HTML specification, it seems to hold true for Chrome 34.0.1847.137m.

Answer 2

Unfortunately, there doesn't seem to be a way to do this. As specified in MDN:

Usage Note: If multiple elements are specified, only the first href and first target value are used; all others are ignored. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Looks like the only way is to use javascript to convert your AJAX urls to full ones. There may be a way with $.ajax that allows you to intercept AJAX requests and manipulate the url before the request is made.

Modifying a jQuery ajax request intercepted via ajaxSend() may be a good starting point