Search code examples
urldomurirelative-pathdomparser

Optional baseURI (location) in DOMParser?

// html data loaded from [http://example.org/some/path]
let htmlSource = `<!DOCTYPE html><html><head></head><body>
 ... <a href="relative"></a> ... 
</body></html>`;

const dom = new DOMParser().parseFromString(htmlSource, 'text/html');

// this returns the value of the attribute as is
dom.links[0].getAttribute('href'); // -> "relative" / nothing new here

// this should resolve urls
dom.links[0].href // -> wait, relative to WHAT??

// if you run this code while being on [http://google.com] you'll get
dom.links[0].href // -> "https://www.google.com/relative"

// Also,

dom.location // -> null / you can't change it

dom.baseURI // -> "https://www.google.com/" / read-only

So it looks like DOMParser implicitly forces to use current page location as baseURI for new HTMLDocument's.

Why not give developer an option (3rd argument?) to explicitly specify document location?

Is there a way to make DOMParser respect optional base url? Workarounds?

Solution

  • You have to use a base tag inside the html code, you can even add it dynamically. Here is your example:

    const htmlSource = `
<!DOCTYPE html>
<html>
 <head>
  <base href="https://www.example.com/">
 </head>
 <body>
  <a href="relative"></a>
 </body>
</html>`;

const dom = new DOMParser().parseFromString(htmlSource, 'text/html');
console.log('DOM link ->', dom.links[0].href);

    Will output:

    DOM link -> https://www.example.com/relative

    Add it dynamically:

    let baseEl = dom.createElement('base');
baseEl.setAttribute('href', 'https://www.example.com');
dom.head.append(baseEl);