这篇文章主要讲解了“HTML中location属性能做什么，有哪些应用”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

location指示了其所连接对象的url位置。Document和window对象中都有location属性，可以通过window.location和document.location访问。
注意 如果想要获得当前文档的完整url字符串，有四种方式

1. document.location
2. document.location.href
3. document.URL
4. document.location.toString()
   以上方式均可以获得'http://www.example.com'这样的字符串

属性

location.href

当前文档的完整url，如果被改变，文档将会导航到另一个新的页面，

  // 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
  location.href = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol

location.protocol

当前url所使用的协议，包括结尾的":"

  // 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
  location.protocol = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol

location.host

获取当前的主机信息，包括主机名，":"和端口号
举例 ：

  // 网址 "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host";
  anchor.host == "developer.mozilla.org:4097"

注意 当服务器使用的端口为默认端口时，则返回的host信息不包括:port

// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"

location.hostname

获取当前url的主机名

// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"

location.port

返回url的端口信息。没有写端口信息的url,实际端口为与协议相关的端口号

  // 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
  location.port = "443"

location.pathname

返回url的路径字符串

  // 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
  location.pathname = "/en-US/HTMLHyperlinkElementUtils.host";

注意这里包括最前面的/和最后面的index.html

location.search

又名查询字符串，返回url中?以及之后的字符串

// 网址为 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"
location.search = '?q=123';
//将去掉问号后的字符串解析为URLSearchParams对象
let params = new URLSearchParams(location.search.substring(1));
//利用get方法获取指定的参数
let q = parseInt(params.get("q")); // is the number 123

location.hash

返回url中代表页面某个区域的带有#的字符串

//网址 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou";
location.hash = '#youhou';

location.username

设置或返回url中域名前面的用户名

// 网址 "https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.username = 'anonymous';

location.username

设置或返回url中密码部分

// 网址"https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.password = 'flabada';

location.origin

返回url中完整的协议和主机地址部分,包括端口

//网址https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
location.origin = 'https://developer.mozilla.org';

完整示例

var url = document.location;
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org

方法

Location.assign()

该方法使浏览器加载并展示URL所指定的文档

document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

Location.reload()

该方法用于重新加载当前页面，可以接受一个Boolean类型的参数，参数为true,强制从服务器重新获取，为false时从缓存中读取。默认值为false

document.location.reload(true);

Location.replace()

提供一个URL，使页面跳转到相应的URL，与location.assign()的区别是，location.replace()跳转后的页面不会保存在浏览器历史中，即无法通过返回按钮返回到该页面。

document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

Location.toString()

获取当前页面的完整URL，相当于location.href

 

 

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"HTML中location属性能做什么，有哪些应用"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS粘性定位是怎样的，如何应用呢？

  CSS粘性定位是怎样的，如何应用呢？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• CSS优先级如何值相加和bit位存储？

  很多朋友对于CSS优先级不是很理解，其实我们能从值相加和bit位存储这两种方式来看，下文的介绍很详细，有需要的有需要的朋友可以了解看看，对大家理解CSS优先级会有一定的帮助。

• CSS中怎样实现文字断裂的效果，代码是什么

  CSS中怎样实现文字断裂的效果，代码是什么？小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧，希望对大家学习或工作能有帮助。

• CSS中的postion和opacity用法和应用是什么

  CSS中postion和opacity及cursor的特性？对于这些概念下文有详细的介绍，小编觉得挺实用的，对大家学习或工作或许有帮助，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

• 纯CSS实现通知公告滚动效果

  通知栏是我们比较常见的组件之一，我们在很多网站都能看到通知栏，这主要用来显示网站的通知和公告。有很多通知公告栏是滚动效果显示，那么这是怎样实现的呢？下面分享几个用纯CSS代码实现通知公告滚动效果，感兴趣的朋友一起来学习下吧。