Get BASE in HTML after installing it, but not using the page URL

Question

The base is dynamically installed in php when building an HTML page:

$base_line = '<base href="' . $some_path . '/" /> '; echo $base_line; 

Now that I am on the HTML page, I need to access this information ($ some_path), and after searching for several hours, I do not seem to find the answer. Please note that the loaded HTML page has a URL that is not connected to the database, and I do not have access to the PHP code to change it. There may be a URL on the loaded page: http://xyz.com/index.php , but all other links on the page will be based on the value set by the base, so I cannot get the base using the page URL.

Suppose I could capture one of the elements, such as an image, and analyze it using the DOM to find the base, but there should be an easier way to do this. Any ideas?

Using window.location does not work in this situation, since it will return what is connected with the loaded URL of the page, and not what was set as the base inside it.

Answer 1

If you want to get the value of the base element, you can do something like:

 var baseHref = document.getElementsByTagName('base')[0].href 

Or be a little safer:

 var bases = document.getElementsByTagName('base'); var baseHref = null; if (bases.length > 0) { baseHref = bases[0].href; } 

---

Update: A more concise way would be:

 const baseHref = (document.getElementsByTagName('base')[0] || {}).href; 

baseHref may be null if it does not have a <base> .

---

Update 2: instead of using getElementsByTagName() use querySelector() :

 var base = (document.querySelector('base') || {}).href; console.log(base); 

 <base href="http://www.google.com"/> 

Answer 2

No need to use jquery, jqlite or legacy APIs. Use the new querySelector API:

 var base = document.querySelector('base'); var baseUrl = base && base.href || ''; 

Answer 3

One problem that I encountered is that using element.href does not return exactly what is installed. For example, if you have this:

 <base href="/some/sub/directory/" /> 

Then element.href will give you:

 document.getElementsByTagName('base')[0].href # http://example.com/some/sub/directory/ 

I found that you can avoid this using the jQuery attr function:

 $("base").attr("href") # /some/sub/directory/ 

If you want to avoid jQuery, you can also use the getAttribute function:

 document.getElementsByTagName('base')[0].getAttribute("href") # /some/sub/directory/ 

Answer 4

Each node has a read-only baseURI property that returns an absolute base URL, or zero if an absolute URI can not be obtained.

To get the base URL of a document, you can use: document.baseURI .

If you only need the path or any other part of the URL, you can create a URL object:

 var baseLocation = new URL(document.baseURI); var pathname = baseLocation.pathname; 

Answer 5

You can try using javascript window.location.hostname if you don't have access to PHP

If you want something like

 http://www.example.com/blahblah/blah.html 

Than these three things work in action

 window.location.protocol = "http" window.location.host = "example.com" window.location.pathname = "blahblah/blah.html" var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname; 

You can see the article for the basic URL function

Answer 6

If you use jqLite (the default value is angularjs), the code looks like this:

 base = angular.element(document.querySelector('base')).attr('href') 

See the angular document for more details.