JS获取当前网址、主机地址项目根路径

获取当前网址、主机地址、项目根路径这些信息,常用于前端框架的开发中,例如:设置cookie、动态加载CSS、JS等资源、Ajax请求API等。

获取当前网址

我们可以使用 window.location 对象来获取当前网址,window.location.href 属性可返回当前页面的完整URL,包括协议、主机名、路径和查询部分。

const currentUrl = window.location.href;
console.log(currentUrl);

输出示例:

https://example.com/path/to/page.html?id=123

获取主机地址

window.location.host 属性可返回URL中的主机部分(包括端口号)。

const currentHost = window.location.host;
console.log(currentHost);

输出示例:

example.com

获取项目根路径

项目根路径通常指的是站点的根目录。例如,站点的根目录为 https://example.com/myApp/,则 myApp/ 即是项目的根路径。我们可以通过 window.location.pathname 属性获取当前URL的路径部分,再去掉路径中的文件名,即可得到项目的根路径。

const currentPath = window.location.pathname;
const currentPathArr = currentPath.split('/');
const rootPath = currentPathArr[1] ? '/' + currentPathArr[1] + '/' : '/';
console.log(rootPath);

输出示例:

/myApp/

另外,我们还可以使用正则表达式来获取项目根路径:

const regExp = /^\/[^\/]+/;
const rootPath = currentPath.match(regExp)[0];
console.log(rootPath);

例如,对于URL https://example.com/myApp/path/to/page.html,以上方法将返回 /myApp

以上就是获取当前网址、主机地址、项目根路径的完整攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS获取当前网址、主机地址项目根路径 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 基于Bootstrap 3 JQuery及RegExp的表单验证功能

    针对“基于Bootstrap 3 JQuery及RegExp的表单验证功能”的完整攻略,下面我们分步骤进行讲解。 1. 引入依赖 首先,我们需要在网页中引入所需的相关依赖,包括Bootstrap 3、JQuery和RegExp,可以通过CDN或者本地文件进行引入。 <head> <link rel="stylesheet&quot…

    JavaScript 2023年6月10日
    00
  • 浅谈JavaScript 声明提升

    浅谈JavaScript 声明提升 声明提升的概念 在JavaScript中,声明提升指的是在代码执行阶段,JavaScript引擎会把所有声明的变量和函数提升至当前作用域的顶部,但是赋值操作并不会提升。这意味着可以在变量和函数声明之前使用它们,因为它们已经被预处理并提升到作用域顶部。 变量声明提升 变量声明提升指的是在JavaScript引擎执行代码之前,…

    JavaScript 2023年5月18日
    00
  • JavaScript/VBScript脚本程序调试(Wscript篇)

    接下来我将为你详细讲解“JavaScript/VBScript脚本程序调试(Wscript篇)”的完整攻略。 标题一:JavaScript/VBScript脚本程序调试(Wscript篇) 在调试JavaScript/VBScript脚本程序时,我们通常会用到Wscript对象的几个方法和属性来实现。下面是具体的步骤: 步骤一:设置调试模式 在调试JavaS…

    JavaScript 2023年5月27日
    00
  • jQuery实现用户注册的表单验证示例

    关于“jQuery实现用户注册的表单验证示例”的完整攻略,我可以为您提供以下几点详细说明: 1. 理解表单验证的原理 在前端开发中,表单验证是非常常见的功能,其主要作用是确保用户输入的数据符合规范,避免因用户输入错误导致的问题。表单验证的原理通常是通过JavaScript代码获取到用户输入的值,对其进行校验,并根据判断结果显示相应的提示信息。其中,jQuer…

    JavaScript 2023年6月10日
    00
  • jQuery表单验证之密码确认

    本文将为您提供简明易懂的jQuery表单验证之密码确认攻略。我们将提供完整的步骤和示例说明,帮助您解决表单验证过程中的疑难问题。 步骤一:引入jQuery库和验证插件 首先,您需要引入jQuery库和验证插件,以便您可以轻松地在网站上进行表单验证。您可以在以下位置找到jQuery库和验证插件: <script src="https://cod…

    JavaScript 2023年6月10日
    00
  • Treeview动态添加用户控件传值和取值的实例代码

    接下来我会为您详细讲解“Treeview动态添加用户控件传值和取值的实例代码”的完整攻略。 问题背景 在.NET Forms应用中,有时需要在TreeView中动态添加用户控件,并传递值。而在取值时,需要将用户控件的值根据TreeView结构进行解析,因此需要一定的编程经验和技巧。 实现思路 我们可以在TreeView的节点上存储自定义对象,并将自定义对象包…

    JavaScript 2023年6月11日
    00
  • vue-cli3+typescript新建一个项目的思路分析

    下面我将给你详细讲解“vue-cli3+typescript新建一个项目的思路分析”的完整攻略: 1. 确定项目名称和路径 首先,你需要在你的电脑上安装 Node.js 和 Vue CLI。假设你已经完成这些步骤,那么接下来你需要确定你的项目名称和路径。在这里,我们假设你的项目名称为 “my-vue-project”,你希望将其放在桌面上的 “project…

    JavaScript 2023年6月11日
    00
  • JQuery插入DOM节点的方法

    JQuery是一款操作DOM的JavaScript库,提供了很多操作DOM节点的方法,包括插入DOM节点的方法。以下是关于JQuery插入DOM节点的方法的完整攻略: 一、插入DOM节点的方法 在JQuery中,插入DOM节点的方法可以使用以下几种: 1.append()方法 append() 方法向被选元素的结尾(即作为其最后一个子元素)插入指定内容。 /…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部