HTML-Location摘抄_017

HTML-Location摘抄

Location 接口表示其连接到的对象的位置URL。所作的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个连接的Location，分别经过 Document.location和Window.location 访问。

属性

Location 接口不继承任何属性，可是实现了那些来自 URLUtils 的属性。

Location.href

包含整个URL的一个DOMString

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href 
console.log(location.href)
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href

Location.protocol

包含URL对应协议的一个DOMString，最后有一个":"。

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/protocol
console.log(location.protocol)
// https:

Location.host

包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。

//https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host
console.log(location.host)
//developer.mozilla.org:4097

Location.hostname

包含URL域名的一个DOMString。

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hostname
console.log(location.hostname)
//developer.mozilla.org

Location.port

包含端口号的一个DOMString。

// https://developer.mozilla.org:443/en-US/docs/HTMLHyperlinkElementUtils.port
console.log(location.port)
//'443'

Location.pathname

包含URL中路径部分的一个DOMString，开头有一个“/"。

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname
console.log(location.pathname)
// /en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname

Location.search

包含URL参数的一个DOMString，开头有一个“?”。

// https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123
console.log(location.search)
//?q=123

• 获取路由参数

var anchor = document.getElementById("myAnchor");
var queryString = anchor.search; // Returns:'?q=123'

// Further parsing:
let params = new URLSearchParams(queryString);
let q = parseInt(params.get("q")); // is the number 123

• 获取路由参数 返回一个object

const getUrlPargm = () => {
  const url = location.search; // 获取url中"?"符后的字串
  const theRequest = new Object();
  if (url.indexOf('?') != -1) {
    const str = url.substr(1);
    let strs = str.split('&');
    for (let i = 0; i < strs.length; i++) {
      theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]);
    }
  }
  return theRequest;
};

// 获取指定的URL参数值
//URL:http://www.baidu.com/index?name=liziceshi
//参数：paramName URL参数
//调用方法:getParam("name")
//返回值:liziceshi
function getParam(paramName) {
    paramValue = "", isFound = !1;
    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
        arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
        while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
    }
    return paramValue == "" && (paramValue = null), paramValue

Location.hash

包含块标识符的DOMString，开头有一个“#”。

//https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou
console.log(location.hash);
// #youhou

Location.username

包含URL中域名前的用户名的一个DOMString。

//https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username
console.log(location.username);
//anonymous

Location.password

包含URL域名前的密码的一个 DOMString。

// Let's <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"> be in the document
var anchor = document.getElementByID("myAnchor");
var result = anchor.password; // Returns:'flabada';

Location.origin 只读

包含页面来源的域名的标准形式DOMString。

若是在没有首先设置用户名属性的状况下设置，则会静默失败

//https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
console.log(location.origin)
//https://developer.mozilla.org

• 来自MDN

var url = document.createElement('a');
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没有继承任何方法，但实现了来自URLUtils的方法。

Location.assign()

加载给定URL的内容资源到这个Location对象所关联的对象上。
Location.assign()方法会触发窗口加载并显示指定的URL的内容。

若是因为安全缘由没法执行跳转，那么会抛出一个SECURITY_ERROR类型的DOMException。当调用此方法的脚原本源和页面的Location对象中定义的来源隶属于不一样域的时候，就会抛出上述错误。

若是传入了一个无效的URL，则会抛出一个SYNTAX_ERROR类型的DOMException。

// 跳转到Location.reload这篇文章
document.location.assign('https://developer.mozilla.org/zh-CN/docs/Web/API/Location.reload');

Location.reload()

从新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会致使该方法引起的刷新必定会从服务器上加载数据。若是是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。

该方法在跨域调用（执行该方法的脚本文件的域和 Location 对象所在页面的跨不一样）时，将会抛出 DOMException 异常.

object.reload(forcedReload);

Location.replace()

用给定的URL替换掉当前的资源。与 assign()方法不一样的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

Location.replace()方法以给定的URL来替换当前的资源。 与assign() 方法 不一样的是调用replace()方法后，当前页面不会保存到会话历史中（session History），这样用户点击回退按钮将不会再跳转到该页面。

因违反安全规则致使的赋值失败，浏览器将会抛出类型为SECURITY_ERROR的DOMException 异常。当调用该方法的脚本所属的源与拥有Location对象所属源不一样时，一般状况会发生这种异常,此时一般该脚本是存在不一样的域下。

若是URL不合法，浏览器也会抛出SYNTAX_ERROR类型DOMException 的异常。

Location.toString()

返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。可是用它是不可以修改Location的值的。

// Let's imagine an <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString"> element is in the document
var anchor = document.getElementById("myAnchor");
var result = anchor.toString(); // Returns: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString'

https://developer.mozilla.org...