javascript - 设置后在 HTML 中获取 BASE，但不使用页面 URL

Question

基础是在构建 HTML 页面时在 php 中动态设置的:

$base_line = '<base href="' . $some_path . '/" /> ';
echo $base_line;

现在我在 HTML 页面中，我需要访问此信息($some_path)，搜索了几个小时后我似乎没有找到答案。请注意，加载的 HTML 页面有一个与基础无关的 URL，我无权访问 PHP 代码来修改它。加载的页面可能有一个 URL，如:http://xyz.com/index.php ，但页面中的所有其他链接都将基于 base 设置的值，因此我无法使用页面 URL 获取 base。

我想我可以抓取其中一个元素(例如图像)并使用 DOM 剖析它以找到基础，但应该有更简单的方法来执行此操作。有什么想法吗？

在这种情况下使用 window.location 不起作用，因为它会返回与加载页面 URL 相关的内容，而不是其中设置为基础的内容。

Answer 1

更新 3

正如@jorgecasar 提到的 in his answer below ，现在有一个属性，baseURI在每个 Node (其中包括每个 Element )。

调用 document.baseURI考虑到 <base>，将为您提供页面的基本路径标签。

请注意，这是所有现代浏览器都支持的最新属性，但如果您使用的是较旧的浏览器，您可能想要坚持使用较旧的答案，或者确保您有一个 poly- 或 ponyfill ( Babel 的标准 polyfill 似乎包含一个，尽管我找不到具体的文档说这么多)。

另外，请注意 document.baseURI将为您提供完全合格的绝对路径，同时获得 href来自 <base> 的属性会给你你提供的确切值，所以两者的用法可能略有不同。

---

原创

如果你想获取基元素的值，你可以这样做:

var baseHref = document.getElementsByTagName('base')[0].href

或者更安全一点:

var bases = document.getElementsByTagName('base');
var baseHref = null;

if (bases.length > 0) {
    baseHref = bases[0].href;
}

---

更新:更简洁的方法是:

const baseHref = (document.getElementsByTagName('base')[0] || {}).href;

baseHref如果它没有 <base> 则可能为 null .

---

更新 2:不再使用 getElementsByTagName() , 使用 querySelector() :

var base = (document.querySelector('base') || {}).href;
console.log(base);

<base href="http://www.google.com"/>