HTML中location属性能做什么,有哪些应用
Admin 2022-08-24 群英技术资讯 465 次浏览
location指示了其所连接对象的url位置。Document和window对象中都有location属性,可以通过window.location和document.location访问。
注意 如果想要获得当前文档的完整url字符串,有四种方式
当前文档的完整url,如果被改变,文档将会导航到另一个新的页面,
// 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
location.href = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol
当前url所使用的协议,包括结尾的":"
// 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
location.protocol = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol
获取当前的主机信息,包括主机名,":"和端口号
举例 :
// 网址 "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"
获取当前url的主机名
// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"
返回url的端口信息。没有写端口信息的url,实际端口为与协议相关的端口号
// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.port = "443"
返回url的路径字符串
// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.pathname = "/en-US/HTMLHyperlinkElementUtils.host";
注意这里包括最前面的/
和最后面的index.html
又名查询字符串,返回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
返回url中代表页面某个区域的带有#的字符串
//网址 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou";
location.hash = '#youhou';
设置或返回url中域名前面的用户名
// 网址 "https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.username = 'anonymous';
设置或返回url中密码部分
// 网址"https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.password = 'flabada';
返回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
该方法使浏览器加载并展示URL所指定的文档
document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
该方法用于重新加载当前页面,可以接受一个Boolean类型的参数,参数为true,强制从服务器重新获取,为false时从缓存中读取。默认值为false
document.location.reload(true);
提供一个URL,使页面跳转到相应的URL,与location.assign()的区别是,location.replace()跳转后的页面不会保存在浏览器历史中,即无法通过返回按钮返回到该页面。
document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
获取当前页面的完整URL,相当于location.href
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了css3如何绘制一个圆圆的loading圈的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了css实现多边形和梯形盒阴影技巧的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章给大家分享的是用flex布局实现无缝滚动的效果。小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
html网页内容过长,会自动拥有垂直滚动条,那么div内部如何实现垂直滚动条呢?这个就需要用到iScroll这个插件了,下面将来实现一个div垂直滚动条示例,用来初步了解|iScroll使用方法。 首先我们新建一个div的容器,div内部会有一个垂直滚动条的,html代码如
在使用CSS时,很多朋友都有遇到过margin的重叠问题,也就会外边距重叠的问题。对此本文就给大家来详细的讲讲CSS中外边距重叠的情况,意义以及避免的方法,感兴趣的朋友就继续往下看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008