设置后在 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，但页面中的所有其他链接都将基于基础设置的值，因此我无法使用页面 URL 获取基础。

我想我可以抓取其中一个元素，例如图像，然后使用 DOM 对其进行剖析以找到基础，但应该有一种更简单的方法来做到这一点。有什么想法吗？

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

Answer 1

更新 3

正如@jorgecasar 提到的in his answer below，现在每个Node（包括每个Element）都有一个属性baseURI。

调用document.baseURI 将为您获取页面的基本路径，同时考虑到<base> 标记。

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

另外，请注意document.baseURI 将为您提供完全限定的绝对路径，而从<base> 获取href 属性将为您提供您提供的确切值，因此用法可能会略有不同两者之一。

---

原创

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

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;

如果没有<base>，baseHref 可能为空。

---

更新 2：不要使用getElementsByTagName()，而是使用querySelector()：

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

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

Answer 2

不需要 jquery、jqlite 或过时的 API。使用较新的querySelector API：

var base = document.querySelector('base');
var baseUrl = base && base.href || '';

Answer 3

我遇到的一个问题是使用element.href 并不能准确返回设置的内容。例如，如果你有这个：

<base href="/some/sub/directory/" />

那么element.href会给你：

document.getElementsByTagName('base')[0].href
# http://example.com/some/sub/directory/

我发现你可以通过使用 jQuery attr 函数来避免这种情况：

$("base").attr("href")
# /some/sub/directory/

如果你想避开jQuery，你也可以使用getAttribute函数：

document.getElementsByTagName('base')[0].getAttribute("href")
# /some/sub/directory/

Answer 4

每个节点都有一个只读属性baseURI，它返回绝对基 URL，如果无法获得绝对 URI，则返回 null。

要获取文档的基本 URL，您可以使用：document.baseURI。

如果您只需要路径名或 URL 的任何其他部分，您可以创建一个 URL 对象：

var baseLocation = new URL(document.baseURI);
var pathname = baseLocation.pathname;

Answer 5

如果您无法访问 PHP，可以尝试使用 javascript window.location.hostname

如果你想要类似的东西

http://www.example.com/blahblah/blah.html

这三样东西在起作用

window.location.protocol = "http"
window.location.host = "example.com"
window.location.pathname = "blahblah/blah.html"

var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

您可以查看此article 以获得基本 url 功能

Answer 6

如果你使用的是jqLit​​e（默认的angularjs），代码如下：

base = angular.element(document.querySelector('base')).attr('href')

更多详情请见angular document。