html中location的用法详解
Location介绍
location指示了其所连接对象的url位置。Document和window对象中都有location属性,可以通过window.location和document.location访问。
注意 如果想要获得当前文档的完整url字符串,有四种方式
- document.location
- document.location.href
- document.URL
- 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的用法详解相关推荐
- C++中substr()函数用法详解
C++中substr()函数用法详解 原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...
- c++中vector的用法详解
c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...
- C#中NameValueCollection类用法详解
C#中NameValueCollection类用法详解,1.NameValueCollection类集合是基于 NameObjectCollectionBase 类. 但与 NameObjectCol ...
- c++ memset 语言_C++中memset函数用法详解
本文实例讲述了C++中memset函数用法.分享给大家供大家参考,具体如下: 功 能: 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值,块的大小由第三个参数指定,这个函数通常 ...
- python中的super用法详解_【Python】【类】super用法详解
一.问题的发现与提出 在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如代码段1: 代码段1: class A: def __init__(sel ...
- JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- java中throws用法_java中throws实例用法详解
在程序出现异常时,会有一个抛出异常的throw出现,这里我们要跟今天所讲的throws区分开.throws的作用是声明抛出,在名称上也跟throw有所不同.下面我们就throws对策概念.语法.实例带 ...
- python中的super用法详解_Python中super函数用法实例分析
本文实例讲述了python中super函数用法.分享给大家供大家参考,具体如下: 这是个高大上的函数,在python装13手册里面介绍过多使用可显得自己是高手 23333. 但其实他还是很重要的. 简 ...
- STL 中map的用法详解
STL 中map的用法详解 Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可 ...
最新文章
- matlab 显示多为,求助!!如何把多输入多输出系统的传函转换为状态空间表达式?...
- ICLR 2021论文接收统计出炉!Top20 机构,国内仅清华在榜!
- RHEV平台中如何在 RED HAT ENTERPRISE LINUX 虚拟机上安装 GUEST 代理和驱动
- 【网络编程】之六、选择select
- 链式二叉树的C语言代码
- mysql日志文件架构_mysql日志文件
- 你为什么用微信,不用 QQ ?
- matlab好看的字体,最佳50个新鲜+漂亮的字体(2011)
- 2021-2022年中国冰雪季旅游行业发展概况及发展趋势分析[图]
- XILINX FPGA最小逻辑单元CLBs, Slices和LUT区别
- javascript --- 设计模式之单体模式(一)
- 开源机器人SmallRobotArm机器人源码解读
- 安利——程序猿必备笔记软件typora+坚果云
- 天平游码读数例题_在天平读数时游码要读游码左端对应的刻度______
- 名帖131 梁诗正 小楷《谢恩折》
- android点赞取消赞功能吗,Android 仿微博的点赞功能的实现原理(持续点赞再取消)...
- 自动驾驶决策规划算法第一章笔记 忠厚老实的老王
- 英雄联盟手游服务器维护中,《英雄联盟手游》serveriscurrentlyundermaintenance解决攻略...
- 三、全国计算机三级数据库考试——操作题(1—5套)
- Prometheus监控神技--自动发现配置
热门文章
- 无线接入网络之异构接入网络(HetNet)
- springboot 多文件压缩下载(流)
- 【metadata】FLV TS 查看元数据信息,跟踪帧率的由来
- html浮点计算器,javascript公式计算引擎-解决浮点数计算误差-网页计算器
- 华为鸿蒙vogtloop30pro价格,最万众瞩目鸿蒙和华为Mate40 Pro,华为Mate30跌至白菜价让路...
- 常用材料辐射率系数表
- matlab振荡环节的频率特性,5-2典型环节与开环系统的频率特性ppt2010.ppt
- C++回顾之前置++、后置++、不等号!及赋值运算符重载
- 机器学习之决策树(手推公式版)
- 米娜时尚网新闻网站发布