HTML Document baseURI Property: Document Base URL

Table of Contents

HTML Document `baseURI` Property: Understanding the Document Base URL

The baseURI property of the HTML Document interface returns the absolute base URI of the document. This property is read-only and provides a way to determine the base URL used for resolving relative URLs within the document. Understanding the baseURI is crucial for managing resources and links correctly, especially in complex web applications.

What is the `baseURI` Property?

The baseURI property returns a string representing the absolute base URI of the document. The base URI is used to resolve relative URLs found in the document, such as those in <link>, <img>, or <a> tags.

It provides the foundation for resolving relative URLs.
It is read-only, meaning you cannot set the base URI using this property.
If the document has no explicit base URI (e.g., no <base> element), it returns the document’s URL.

Purpose of the `baseURI` Property

The primary purpose of the baseURI property is to:

Provide a way to programmatically determine the document’s base URL.
Allow JavaScript code to correctly resolve relative URLs.
Help manage resources and links within the document.

Syntax

The syntax for accessing the baseURI property is straightforward:

let baseURI = document.baseURI;

baseURI: A read-only property that returns a string containing the base URI of the document.

Practical Examples

Let’s explore several practical examples to illustrate how the baseURI property works.

Basic Usage: Retrieving the Base URI

In this example, we’ll retrieve and display the baseURI of the current document.

<!DOCTYPE html>
<html>
  <head>
    <title>Document baseURI Example</title>
  </head>
  <body>
    <h1>Document baseURI Example</h1>
    <p id="baseURI"></p>

    <script>
      const baseURIElement_example1 = document.getElementById("baseURI");
      const baseURI_example1 = document.baseURI;
      baseURIElement_example1.textContent = "Base URI: " + baseURI_example1;
    </script>
  </body>
</html>

Output:

If the page is accessed via http://example.com/path/to/page.html, the output will be:

Base URI: http://example.com/path/to/page.html

Using `<base>` Tag: Overriding the Base URI

The <base> tag allows you to specify a base URL for all relative URLs in the document. Let’s see how the baseURI property reflects this.

<!DOCTYPE html>
<html>
  <head>
    <title>Document baseURI Example with Base Tag</title>
    <base href="https://cdn.example.com/resources/" />
  </head>
  <body>
    <h1>Document baseURI Example with Base Tag</h1>
    <p id="baseURIWithBase"></p>

    <script>
      const baseURIElement_example2 = document.getElementById("baseURIWithBase");
      const baseURI_example2 = document.baseURI;
      baseURIElement_example2.textContent =
        "Base URI: " + baseURI_example2;
    </script>
  </body>
</html>

Output:

Base URI: https://cdn.example.com/resources/

In this case, the baseURI reflects the URL specified in the <base> tag.

Handling Relative URLs

The baseURI property is essential for resolving relative URLs. Here’s an example demonstrating how it affects the resolution of relative URLs in JavaScript.

<!DOCTYPE html>
<html>
  <head>
    <title>Relative URL Resolution with baseURI</title>
    <base href="https://cdn.example.com/assets/" />
  </head>
  <body>
    <h1>Relative URL Resolution with baseURI</h1>
    <p id="relativeURL"></p>

    <script>
      const relativeURLElement_example3 = document.getElementById("relativeURL");
      const relativePath = "images/logo.png";
      const absoluteURL = new URL(relativePath, document.baseURI).href;
      relativeURLElement_example3.textContent =
        "Absolute URL: " + absoluteURL;
    </script>
  </body>
</html>

Output:

Absolute URL: https://cdn.example.com/assets/images/logo.png

This example demonstrates how the baseURI is used to resolve the relative path images/logo.png into an absolute URL.

`baseURI` in an IFrame

When a document is loaded within an <iframe>, the baseURI property reflects the base URI of the document inside the <iframe>.

<!DOCTYPE html>
<html>
  <head>
    <title>baseURI in IFrame Example</title>
  </head>
  <body>
    <h1>baseURI in IFrame Example</h1>
    <iframe src="iframe-content.html"></iframe>

    <script>
      // iframe-content.html
      // <!DOCTYPE html>
      // <html>
      // <head>
      //     <title>IFrame Content</title>
      //     <base href="https://cdn.example.com/iframe-assets/">
      // </head>
      // <body>
      //     <p id="iframeBaseURI"></p>
      //     <script>
      //         const iframeBaseURIElement = document.getElementById('iframeBaseURI');
      //         iframeBaseURIElement.textContent = 'IFrame Base URI: ' + document.baseURI;
      //     </script>
      // </body>
      // </html>
    </script>
  </body>
</html>

Assuming iframe-content.html contains:

<!DOCTYPE html>
<html>
  <head>
    <title>IFrame Content</title>
    <base href="https://cdn.example.com/iframe-assets/" />
  </head>
  <body>
    <p id="iframeBaseURI"></p>
    <script>
      const iframeBaseURIElement_example4 = document.getElementById("iframeBaseURI");
      iframeBaseURIElement_example4.textContent =
        "IFrame Base URI: " + document.baseURI;
    </script>
  </body>
</html>

The output inside the <iframe> will be:

IFrame Base URI: https://cdn.example.com/iframe-assets/

Handling Missing `<base>` Tag

If the document doesn’t have a <base> tag, the baseURI property returns the document’s URL.

<!DOCTYPE html>
<html>
  <head>
    <title>Document baseURI Example without Base Tag</title>
  </head>
  <body>
    <h1>Document baseURI Example without Base Tag</h1>
    <p id="baseURIWithoutBase"></p>

    <script>
      const baseURIElement_example5 = document.getElementById("baseURIWithoutBase");
      const baseURI_example5 = document.baseURI;
      baseURIElement_example5.textContent =
        "Base URI: " + baseURI_example5;
    </script>
  </body>
</html>

Output:

If the page is accessed via http://example.com/path/to/page.html, the output will be:

Base URI: http://example.com/path/to/page.html

Advanced Example: Dynamic Base URL

This advanced example dynamically updates a relative image URL based on the document’s baseURI.

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Base URL Example</title>
    <base href="https://cdn.example.com/dynamic/" />
  </head>
  <body>
    <h1>Dynamic Base URL Example</h1>
    <img id="dynamicImage" src="images/placeholder.png" alt="Placeholder" />
    <p id="imageURL"></p>

    <script>
      const dynamicImage_example6 = document.getElementById("dynamicImage");
      const imageURLElement_example6 = document.getElementById("imageURL");

      // Get the relative image URL
      const relativeImageURL = dynamicImage_example6.getAttribute("src");

      // Resolve the absolute URL using document.baseURI
      const absoluteImageURL = new URL(relativeImageURL, document.baseURI).href;

      // Update the paragraph with the absolute URL
      imageURLElement_example6.textContent = "Absolute Image URL: " + absoluteImageURL;
    </script>
  </body>
</html>

Output:

Absolute Image URL: https://cdn.example.com/dynamic/images/placeholder.png

Practical Applications

Understanding and utilizing the baseURI property can be highly beneficial in several real-world scenarios:

Content Delivery Networks (CDNs): When loading resources from a CDN, setting the <base> tag to the CDN’s URL ensures that all relative URLs are resolved correctly.
Single-Page Applications (SPAs): SPAs often use client-side routing, which can affect how relative URLs are resolved. Using baseURI helps maintain consistent URL resolution.
Dynamic Content Loading: When dynamically loading content via AJAX, baseURI ensures that relative URLs within the loaded content are correctly resolved.
Web Components: In web components, using baseURI ensures that the component’s internal resources are loaded correctly, regardless of where the component is used in the application.

Browser Support

The document.baseURI property is supported by all modern browsers:

Chrome
Firefox
Safari
Edge
Opera

Conclusion

The HTML Document baseURI property is a fundamental tool for managing URLs in web development. By understanding how it works and how to use it effectively, you can ensure that your web applications correctly resolve relative URLs, load resources properly, and provide a consistent user experience. Whether you’re working with CDNs, SPAs, or dynamic content, the baseURI property is an essential part of your toolkit. 🛠️

HTML Document baseURI Property: Document Base URL

HTML Document baseURI Property: Understanding the Document Base URL

What is the baseURI Property?

Purpose of the baseURI Property

Syntax

Practical Examples

Basic Usage: Retrieving the Base URI

Using <base> Tag: Overriding the Base URI

Handling Relative URLs

baseURI in an IFrame

Handling Missing <base> Tag

Advanced Example: Dynamic Base URL

Practical Applications

Browser Support

Conclusion

Continue Reading

JavaScript Window length Property: Window Length

JavaScript Window name Property: Window Name

JavaScript Window navigator Property: Window Navigator

JavaScript Window opener Property: Window Opener

JavaScript Window outerHeight Property: Window Outer Height

JavaScript Window outerWidth Property: Window Outer Width

HTML Document `baseURI` Property: Understanding the Document Base URL

What is the `baseURI` Property?

Purpose of the `baseURI` Property

Using `<base>` Tag: Overriding the Base URI

`baseURI` in an IFrame

Handling Missing `<base>` Tag