DOMParser中的可选baseURI(位置)?

dis*_*ted 2 url dom uri relative-path 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
Run Code Online (Sandbox Code Playgroud)

所以它看起来像DOMParser隐含势力利用当前页面location作为baseURIHTMLDocument的。

为什么不给开发人员一个选项(第三个参数?)来显式指定文档位置?

有没有办法DOMParser尊重可选的基本网址?解决方法?

Chr*_*ras 5

您必须base在html代码中使用标签,甚至可以动态添加它。这是您的示例:

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);
Run Code Online (Sandbox Code Playgroud)

将输出:

DOM link -> https://www.example.com/relative
Run Code Online (Sandbox Code Playgroud)

动态添加:

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

  • 好的。我会添加检查基本元素是否存在 `if (dom.head.getElementsByTagName('base').length == 0)` (3认同)