CODEWITHSUNDEEP
javascripthtml
boo-urns
boo-urns

Reputation: 10376

Appending base tag to head with JavaScript

Can you append a base tag to the head of a document from a div in the body of the document using JavaScript? By that, I mean, what are some drawbacks of doing that? My concern is that I'll run into a sort of race condition because the base tag is understood to exist in the head so it won't get respected if the page has already been rendered. I haven't yet experienced this problem, but I was wondering whether it should be a concern.

To be clear, I know how do this via JavaScript. My question is whether the tag will be respected/honored if it's appended to the DOM after the page loads/renders...

My code is an HTML fragment that is likely to appear in the body, but I need to set the base tag because my assets are referenced relatively. Let's assume that I can't change that (because I can't. At least, not right away). You can also assume that setting the base won't break anything that's not my HTML fragment and that there are no other base tags...ever.

Upvotes: 5

Views: 8941

Answers (4)

Rolf
Rolf

Reputation: 5743

Search engines? There was a time when search engines crawling bots did not "understand" or run any of the Javascript code. In this case, such bots would get all the links wrong and the crawling would stop right there.

So basically it might hamper some crawlers from crawling and indexing your links.

Upvotes: 0

Max Powers
Max Powers

Reputation: 21

Jukka to answer your question of WHY you would want to do it that way.

Example.

A mobile application such as phonegap that is a thin wrapper around a webapp, but smart enough to know if it's running in a browser or on the device.

Once it knows that it's on a device, then it needs to know the base url so it can properly locate everything that was previously referenced as relative URLs.

In our case, we have 4 different systems, dev, test, beta & live, each with different URLs.

Usually changes are incremental, but a lot of times we do want to test back and forth between each system, for instance in a/b testing.

Since the routing layouts are basically identical, switching back and forth on the base URL makes a lot of sense.

Remember many web apps use a static asset such as an html page for the application skeleton, javascript for the glue logic and a web based backend that is really nothing more than a thin layer over a DB. eg MEAN apps are frequently this way.

Building your apps this way provides a phenomenal speed up in scalability and responsiveness since the "web" server doesn't have to slow down long enough to construct the page view as happens in template languages.

Anyways setting the base url means being able to change where the app sources it's data on the fly and can be incredible speed up for developer productivity due to code reuse.

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

Yes, for example:

<script>
var base = document.createElement('base');
base.href = 'http://www.w3.org/';
document.getElementsByTagName('head')[0].appendChild(base);
</script>

I don’t see why you would want to do this, but it’s possible.

Upvotes: 4

LexLythius
LexLythius

Reputation: 1944

I might be wrong (or partially wrong depending on how each browser chose to implement that), but AFAIK the document URL base is parsed only once. By the time you append that BASE Element to the DOM it is already too late.

EDIT: Looks like I was wrong

Apparently, there is a way. But there are also downsides about search engines.

Upvotes: 3

Related Questions