Menu
// 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?
792
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
