在前端开发过程中,经常需要获取当前网站的基础 URL。这个基础 URL 包含了协议、主机名和端口号等信息,是进行一些网络请求和页面跳转等操作的必要条件。本文将介绍在 JavaScript 中如何获取网站的基础 URL,并给出相关示例代码。
使用 window.location 对象获取基础 URL
JavaScript 中提供了一个 window.location
对象,它包含了当前网站的 URL 信息,我们可以从中获取网站的基础 URL。具体来说,我们可以通过以下代码获取基础 URL:
const baseUrl = `${window.location.protocol}//${window.location.host}`;
在上述代码中,window.location.protocol
表示当前网站的协议,例如 http:
或 https:
;window.location.host
则表示当前网站的主机名和端口号,例如 www.example.com:8080
。这两者结合起来,就可以构成当前网站的基础 URL。
需要注意的是,由于浏览器的安全限制,JavaScript 并不能直接访问所有的 URL 信息。如果我们尝试获取 window.location.href
,则会得到一个包含敏感信息的字符串,因此不推荐使用该属性获取基础 URL。
使用 document.baseURI 属性获取基础 URL
除了 window.location
对象之外,JavaScript 还提供了一个 document.baseURI
属性,可以用于获取当前网页的基础 URL。具体来说,我们可以通过以下代码获取基础 URL:
const baseUrl = document.baseURI;
需要注意的是,document.baseURI
属性并不是所有浏览器都支持的,因此在使用该属性时需要进行兼容性检查。
实际应用示例
下面是一个实际应用示例,假设我们有一个按钮,点击后需要跳转到当前网站的首页。我们可以通过以下代码实现该功能:
<button onclick="redirectToHomepage()">返回首页</button>
function redirectToHomepage() { const baseUrl = `${window.location.protocol}//${window.location.host}`; window.location.href = `${baseUrl}/index.html`; }
在上述代码中,我们先通过 window.location
对象获取基础 URL,然后将其与 /index.html
拼接起来,最终得到完整的首页 URL。接着,我们将该 URL 赋值给 window.location.href
属性,即可实现页面跳转。
总结
本文介绍了在 JavaScript 中获取网站的基础 URL 的方法,其中包括使用 window.location
对象和 document.baseURI
属性两种方式。同时,我们也给出了一个实际应用示例,以帮助读者更好地理解如何使用这些技术。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/30313