Search code examples
javascriptbrowserfrontend

What is the difference between document.baseURI and document.URL in javascript

I always saw in developer tool that the both the entities(baseURI and URL) shows the same URL, which is shown in address bar most of the time. Can someone provide me the scenarios when those are different and when do we use one over other. I have seen the description of mdn website but still confused regarding those two terms.

Solution

  • For most intended purposes, it is the same. But it can differ in some scenarios.

    1. If you use a <base> tag in the HTML document. Lets say, you use the following HTML tag,

    <base href = "https://example.org" />

    Check the https://jsfiddle.net/kqbL0c4f/

    and your URL is https://example.org/123 Your document.URL and document.baseURI would differ.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    The <base> HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document.

    1. If you create a document dynamically