设置完成后,在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

如果要获取基本元素的值,可以执行以下操作:

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如果它没有,则可以为null <base>.

Answer 2

不需要jquery,jqlite或过时的API.使用较新的querySelectorAPI:

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

Answer 3

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

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

然后element.href会给你：

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

我发现您可以通过使用 jQueryattr函数来避免这种情况：

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

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

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

Answer 4

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

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

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

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