HTML-Location摘抄_017

RobinQu 发布于2019-08-02 14:32 / 1848人阅读

摘要：摘抄接口表示其链接到的对象的位置。所做的修改反映在与之相关的对象上。方法会触发窗口加载并显示指定的的内容。因违反安全规则导致的赋值失败，浏览器将会抛出类型为的异常。

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  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  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...

云服务器混合云 __JS __gc __filename __dirname

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53868.html

HTML-Location摘抄_017

摘要：摘抄接口表示其链接到的对象的位置。所做的修改反映在与之相关的对象上。方法会触发窗口加载并显示指定的的内容。因违反安全规则导致的赋值失败，浏览器将会抛出类型为的异常。 HTML-Location摘抄 Location 接口表示其链接到的对象的位置URL。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Documen...

biaoxiaoduan 2019-08-23 15:57 评论0 收藏0
从零开始的webpack生活-0x017：CustomPlugin自定义插件

摘要：概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。打包并查看文件更多配置请查阅关于自定义章节资源源代码 0x001 概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。 0x002 环境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...

springDevBird 2019-08-21 17:36 评论0 收藏0
Java017-正则表达式

摘要：好处正则的出现，对字符串的复杂操作变得更为简单。将正则和字符串关联对字符串进行匹配。替换其实用的就是类中的获取先要将正则表达式编译成正则对象。用于描述正则表达式，可以对正则表达式进行解析。定义其实是用来操作字符串的一些规则。其实更多是用正则解决字符串操作的问题。好处正则的出现，对字符串的复杂操作变得更为简单。特点将对字符串操作的代码用一些符号来表示。只要使用了指定符号，就可...

浠ラ箍 2019-08-16 14:46 评论0 收藏0
React入门0x017: 函数组件

摘要：概述函数组件其实就是一个函数，一个函数。所以可以用来做一些快速的封装，比如，一个组件的代码太多，显得咋乱，又没有复杂到需要另起一个组件，可以用函数组件源码这是标题栏这是导航栏哈哈效果总结没有多余的东西，对性能也有所提升哦 0x000 概述函数组件其实就是一个函数，一个render函数。 0x001 栗子源码 import React from react import Reac...

weapon 2019-08-23 13:50 评论0 收藏0