me

bom

Viewport

Tip

视口代表一个可看见的多边形区域（通常是矩形）.在浏览器的范畴里，他代表的就是浏览器网站中可见内容的部分，视口外的内容在被滚动进来前都是不可见的

浏览器窗口大小

注意：布局视口相对于可见视口的概念.可见视口只能显示页面的一小部分。

浏览器视口

DOM 元素大小

event 事件上的元素大小

Important

该元素只会在 event（如 click、mousemove 等）上才有的属性

location

window.location 和 document.location指向同一个对象

属性描述
Location.href包含整个 URL,location 的 toString() 方法返回
Location.protocol页面使用的协议。通常包括http或https:
Location.host服务器名和端口号
Location.hostname服务器名
Location.port端口号
Location.pathnameurl 的路径
Location.search查询字符串。以 ? 开头
Location.hash哈希散列值，开头有一个“#”
Location.username域名前指定的用户名
Location.password域名前指定的密码
Location.originurl 的源地址

查询字符串的解码 decodeURIComponent 和编码 encodeURIComponent

encodeURIComponent("#");
//'%23'
decodeURIComponent("%23");
//'#'

let searchParams = new URLSearchParams("?name=zhangsan&sex=gender");
searchParams.has("name"); //true
searchParams.get("name"); //zhangsan
searchParams.set("age", "15");
searchParams.toString();
//'name=zhangsan&sex=gender&age=15'

操作地址

Note

如果不希望浏览器的操作地址增加，可以使用 location.replace()，用户不能回到前一页

location.reload()：重新加载当前显示页面

  • 如果不传参数，会以最有效的方式加载 (可能是缓存)
  • 如果传 true，会从服务器加载

URL

URL 用于解析，构造，规范化和编码 url。如果浏览器不支持 new URL() 构造函数。可以使用 new window.URL()

new URL()

构造函数：new URL(url[,base])

let baseurl = "https://www.baidu.com/laji";

//忽略参数
new URL("/zhenlan", baseurl); //https://www.baidu.com/zhenlan

//TypeError
new URL("www.baidu.com");

new URL("https://www.baidu.com"); //https://www.baidu.com

const url = new URL(
  "https://developer.mozilla.org:3300/en-US/docs/Web/API/URL/href?q=123#Examples",
);
const hash = url.hash; //#Examples
const host = url.host; //developer.mozilla.org:3300
const host = url.hostname; //developer.mozilla.org
const host = url.href; //https://developer.mozilla.org:3300/en-US/docs/Web/API/URL/href#Examples
const origin = url.origin; //https://developer.mozilla.org
const pathname = url.pathname; ///en-US/docs/Web/API/URL/href
const port = url.port; //3300
const protocol = url.protocol; //https
const search = url.search; //?q=123

const url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password",
);
const password = url.password; //flabada
const username = url.username; //anonymous

静态方法

URLSearchParams

该接口定义了一些实用的方法来处理 URL 的查询字符串

new URLSearchParams()

URLSearchParams() 构造器创建并返回一个新的 URLSearchParams 对象。并且会忽略 ?

new URLSearchParams("?foo=1&bar=2");
new URLSearchParams(url.search);
new URLSearchParams([["foo", 1], ["bar", 2]]);
new URLSearchParams({ "foo": 1, "bar": 2 });

方法

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);
params.getAll("foo"); //['1', '4']
params.get("foo"); //'1'
params.append("foo", 4); //foo=1&bar=2&foo=4
params.has("bar"); // true
params.set("foo", 2); //foo=2&bar=2
params.delete("foo"); //bar=2
params.set("foo", 4);

//entries
for (let [key, value] of params.entries()) {
  console.log(key, value);
  //bar 2
  //foo 4
}

//forEach
params.forEach((item, key) => console.log(item, key));
//bar 2
//foo 4

//keys()
console.log(...params.keys());
//bar foo

//values()
console.log(...params.values());
//2 4

params.toString();
//'bar=2&foo=4'

History

Note

如果页面的 url 发生变化，则会在历史记录中生成一个新条目。这也包括 url 的散列值 (location.hash)

管理历史状态

window.addEventListener("popstate", (event) => {
  console.log(
    "location: " + document.location + ", state: " +
      JSON.stringify(event.state),
  );
});
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back();
// Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back();
// Logs "location: http://example.com/example.html, state: null
history.go(2);
// Logs "location: http://example.com/example.html?page=3, state: {"page":3}

同时也可以使用 history.state 获取当前状态（state对象）。history.replaceState() 更新状态不会创建新历史记录，只会覆盖当前状态