html中location的用法详解
2017-09-03 21:45
218 查看
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[/code]location.protocol
当前url所使用的协议,包括结尾的":"// 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol"; location.protocol = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol[/code]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.htmllocation.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 123location.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[/code]方法
Location.assign()
该方法使浏览器加载并展示URL所指定的文档document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');Location.reload()
该方法用于重新加载当前页面,可以接受一个Boolean类型的参数,参数为true,强制从服务器重新获取,为false时从缓存中读取。默认值为falsedocument.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的电子邮件链接标签mailto用法详解
- window.location用法详解
- 详解Html a标签中href和onclick用法、区别、优先级别
- HTML中select标签单选多选用法详解
- 详解html中 position属性用法(四种)
- C++中this指针的用法详解 http://blog.chinaunix.net/uid-21411227-id-1826942.html
- HTML中<!DOCTYPE>作用及用法详解
- 详解html-webpack-plugin插件(用法总结)
- HTML的电子邮件链接标签mailto用法详解
- 简单html以及css的用法详解
- 详解location.href几种用法的区别【JS跳转】
- Ecshop模板中html_options用法详解
- 【javascript】详解location.href几种用法的区别
- HTML 属性标记之 mailto 的用法详解
- 详解html-webpack-plugin用法全解
- JavaScript location对象用法详解
- location对象用法详解
- 从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)
- HTML/CSS中a标签用法详解
- HTML/CSS中有序<ol&g bfb7 t;、无序<ul>、定义列表用法详解