Javascript 设置后在 HTML 中获取 BASE，但不使用页面 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13832690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get BASE in HTML after it has been set, but not using page URL
提问by Rasul
The base is dynamically set in php when an HTML page is built:
构建 HTML 页面时，在 php 中动态设置基础：
$base_line = '<base href="' . $some_path . '/" /> ';
echo $base_line;
Now that I am in the HTML page I need to access this information ($some_path) and after searching for a few hours I don't seem to find an answer. Please note that the loaded HTML page has a URL that is not related to the base and I don't have access to the PHP code to modify it. The loaded page could have a URL like: http://xyz.com/index.php, but all other links in the page will be based on the value set by the base so I can't get the base using the page URL.
现在我在 HTML 页面中，我需要访问此信息 ($some_path)，但在搜索了几个小时后，我似乎没有找到答案。请注意，加载的 HTML 页面有一个与基础无关的 URL，我无权访问 PHP 代码来修改它。加载的页面可能有一个 URL，如：http://xyz.com/index.php，但页面中的所有其他链接都将基于 base 设置的值，因此我无法使用页面 URL 获取 base .
I suppose I could grab one of the elements like an image and dissect it using DOM to find the base, but there should be an easier way to do this. Any ideas?
我想我可以抓取像图像这样的元素之一并使用 DOM 对其进行剖析以找到基础，但应该有一种更简单的方法来做到这一点。有任何想法吗？
Using window.location doesn't work in this situation as it will return what is related to the loaded page URL and not what has been set as base within it.
在这种情况下，使用 window.location 不起作用，因为它将返回与加载的页面 URL 相关的内容，而不是其中设置为基础的内容。
回答by samanime
Update 3
更新 3
As @jorgecasar mentioned in his answer below, there is now a property, baseURIon every Node(which includes every Element).
正如@jorgecasar在下面的回答中提到的，现在有一个属性，baseURI在 every Node（包括 every Element）上。
Calling document.baseURIwill get you the base path to the page, taking into account the <base>tag.
document.baseURI考虑到<base>标签，调用将为您提供页面的基本路径。
Note that it is a recent-ish property that is supported by all modern browsers, but if you are using older browsers you might either want to stick with the older answers or make sure you have a poly- or ponyfill for it (Babel's standard polyfill seems to include one, though I couldn't find specific documentation saying as much).
请注意，这是所有现代浏览器都支持的最新属性，但是如果您使用的是旧浏览器，您可能想要坚持使用旧答案或确保您有一个 poly- 或 ponyfill（Babel 的标准 polyfill似乎包括一个，虽然我找不到具体的文档说那么多）。
Also, note that document.baseURIwill give you a fully-qualified absolute path, whereas getting the hrefattribute from <base>will give you the exact value you provided, so there may be a slight difference in the usage of the two.
另外，请注意，这document.baseURI将为您提供完全限定的绝对路径，而获取href属性 from<base>将为您提供您提供的确切值，因此两者的用法可能略有不同。
Original
原来的
If you want to get the value of the base element, you can do something like:
如果要获取基本元素的值，可以执行以下操作：
var baseHref = document.getElementsByTagName('base')[0].href
Or to be a little safer:
或者更安全一点：
var bases = document.getElementsByTagName('base');
var baseHref = null;
if (bases.length > 0) {
baseHref = bases[0].href;
}
Update: a more concise way would be:
更新：更简洁的方法是：
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
baseHrefmay be null if it doesn't have a <base>.
baseHref如果没有<base>.
Update 2: Instead of using getElementsByTagName(), use querySelector():
更新 2：而不是使用getElementsByTagName()，使用querySelector()：
var base = (document.querySelector('base') || {}).href;
console.log(base);<base href="http://www.google.com"/>回答by Nelo Mitranim
No need for jquery, jqlite, or obsolete APIs. Use the newer querySelectorAPI:
不需要 jquery、jqlite 或过时的 API。使用较新的querySelectorAPI：
var base = document.querySelector('base');
var baseUrl = base && base.href || '';
回答by jchavannes
One issue I ran into is that using element.hrefdoesn't return exactly what is set. For example, if you have this:
我遇到的一个问题是 usingelement.href不会准确返回设置的内容。例如，如果你有这个：
<base href="/some/sub/directory/" />
Then element.hrefwill give you:
然后element.href会给你：
document.getElementsByTagName('base')[0].href
# http://example.com/some/sub/directory/
I found that you can avoid this by using the jQuery attrfunction:
我发现您可以通过使用 jQueryattr函数来避免这种情况：
$("base").attr("href")
# /some/sub/directory/
If you want to avoid jQuery, you can also use the getAttributefunction:
如果你想避免使用 jQuery，你也可以使用该getAttribute函数：
document.getElementsByTagName('base')[0].getAttribute("href")
# /some/sub/directory/
回答by jorgecasar
Every Node has a readonly property baseURIthat returns the absolute base URL or null if unable to obtain an absolute URI.
每个节点都有一个只读属性baseURI，它返回绝对基 URL，如果无法获得绝对 URI，则返回 null。
To obtain the base URL of a document you can use: document.baseURI.
要获取文档的基本 URL，您可以使用：document.baseURI。
If you only want the pathname or any other part of the URL you can create a URLobject:
如果您只需要路径名或 URL 的任何其他部分，您可以创建一个URL对象：
var baseLocation = new URL(document.baseURI);
var pathname = baseLocation.pathname;
回答by Mr. Alien
You can try using javascript window.location.hostnameif you don't have access to PHP
window.location.hostname如果您无法访问 PHP，可以尝试使用 javascript
If you want something like
如果你想要类似的东西
http://www.example.com/blahblah/blah.html
Than these 3 things comes in action
比这三件事起作用
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;
You can look at this articlefor a base url function
您可以查看这篇文章以获取基本 url 函数
回答by hao
If you are using jqLite(The angularjs default), the code looks like:
如果您使用的是 jqLite（angularjs 默认），代码如下所示：
base = angular.element(document.querySelector('base')).attr('href')
See angular documentfor more details.
有关更多详细信息，请参阅角度文档。
