js如何获取当前页面url网址

文章2021-11-23339 人已阅来源：网络

在WEB开发中，时常会用到javascript来获取当前页面的url网址信息，在这里是我的一些获取url信息的小总结。

下面我们举例一个URL，然后获得它的各个组成部分：https://aihongxin.com/1086.html?v=ahx

1、window.location.href(设置或获取整个 URL 为字符串)

var test = window.location.href;
alert(test);
//返回：https://aihongxin.com/1086.html?v=ahx

2、window.location.protocol(设置或获取 URL 的协议部分)

var test = window.location.protocol;
alert(test);
//返回：http:

3、window.location.host(设置或获取 URL 的主机部分)

var test = window.location.host;
alert(test);
//返回：aihongxin.com

4、window.location.port(设置或获取与 URL 关联的端口号码)

var test = window.location.port;
alert(test);
//返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)

5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)

var test = window.location.pathname;
alert(test);
//返回：/1086.html

6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

var test = window.location.search;
alert(test);
//返回：?v=ahx

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)

var test = window.location.hash;
alert(test);
//返回：空字符(因为url中没有)

相关内容

  • css中margin的4个属性顺序

    在CSS中，margin 属性的四个值可以按照以下两种方式来指定：按照顺时针方向依次指定上、右、下、左四个方向的外边距值。例如：margin:10px20px15px5px;/...

  • css中padding四个值的顺序

    当你使用padding属性来设置元素的内边距时，可以按照以下两种方式来指定四个值：按照顺时针方向依次指定上、右、下、左四个方向的内边距值。例如：padding:10px20px...

  • 微信手机弹幕/手持弹幕怎么弄

    有很多朋友问：手机弹幕怎么弄？在这里给大家分享一下，手机弹幕一般是小程序制作的，不用麻烦的再去下载APP。在这里给大家说一下，手机弹幕和手持弹幕其实是说的一个东西，只是叫法不同...

    微信手机弹幕/手持弹幕怎么弄
  • JS中函数(function)的定义以及几种用法

    在JavaScript中，函数（function）是一种可重复使用的代码块，用于执行特定的任务。函数可以接受参数（也称为形式参数），执行一系列的操作，并返回一个值。以下是定义函...

  • js中function函数的用法

    ...

  • js find()方法的用法与详解

    find() 方法是JavaScript数组对象的一个方法，用于查找数组中满足指定条件的第一个元素，并返回该元素。find() 方法的语法如下：array.find(funct...

  • js中split()方法的用法与详解

    split() 方法是JavaScript字符串对象的一个方法，用于将字符串拆分成一个字符串数组，基于指定的分隔符将字符串分割成多个子字符串。split() 方法的语法如下：s...

  • CSS linear-gradient() 函数 详解

    linear-gradient() 函数是CSS中用于创建线性渐变背景的函数。它可以在两个或多个颜色之间创建平滑过渡的效果。linear-gradient() 函数的语法如下：...

  • js splice方法详解

    splice() 是JavaScript数组对象的一个方法，用于修改数组的内容。它可以实现删除、插入和替换数组元素的功能。splice() 方法接受三个参数：start：指定删...

  • 帝国cms生成静态出现ecms_news_data_’ doesn’t exist的解决办法

    帝国cms生成静态出现ecms_news_data_'doesn'texist的解决办法Table'******_ecms_news_data_'doesn'texistsel...

浏览更多有关 的内容