[转自]
Location 介绍
location 指示了其所连接对象的 url 位置. 和 Windows 对象中都有 location 属性, 可以通过 Windows.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
来源: http://www.bubuko.com/infodetail-2971624.html