liaooo

标签： window

  • window对象

    location

    对象

    常用属性和方法:

    href属性获取完整的 URL 地址，对其赋值时用于地址的跳转

    //获取当前url地址
console.log(location.href)
//跳转到目标地址
location.href = 'https://api.liaooo.cn'

    search属性获取地址中携带的参数，符号?后面部分

    //--- https://api.liaooo.cn/?s=123
console.log(location.search)
// ?s=123

    hash属性获取地址中的啥希值，符号#后面部分

    //--- https://api.liaooo.cn/#site-header
console.log(location.hash)
// '#site-header'

    reload方法用来刷新当前页面，传入参数true时表示强制刷新

    location.reload(true) //默认为false 强制刷新（重新从服务器获取资源）

    对象

    常用属性和方法:

    通过userAgent检测浏览器的版本及平台

    // 检测 userAgent（浏览器信息）
!(function () {
	const userAgent = navigator.userAgent
	// 验证是否为Android或iPhone
	const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
	const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
	// 如果是Android或iPhone，则跳转至移动站点
	if (android || iphone) {
		location.href = 'https://api.liaooo.cn'
	}
})()

    histroy

    对象

    向前和向后跳转

    //这和用户点击浏览器回退按钮的效果相同

//回到上一个页面
history.back()

//去到下一个页面
window.history.forward()

    跳转到 history 中指定的一个点

    //回到上一个页面 等同于调用 back()
history.go(-1)

//去到下一个页面 等同于调用了 forward()
history.go(1)

//类似地，你可以传递参数值2并向前移动2个页面，等等.

    可以通过查看长度属性的值来确定的历史堆栈中页面的数量:

    let numberOfEntries = history.length

    History API – Web API 接口参考 | MDN

  • BOM

    BOM ( Browser Object Model ) 是浏览器对象模型

    window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM (浏览器对象模型)

    • 全局变量是 window 对象的属性
    • 全局函数是 window 对象的方法

    注：依附于 window 对象的所有属性和方法，使用时可以省略 window

    Window – Web API 接口参考 | MDN

  • resize事件

    文档视图调整大小时会触发 resize 事件.

    resize事件仅在window对象上触发.

    只有在window对象上注册的处理程序才会接收resize事件.

    window.addEventListener('resize',function(){})

    检测屏幕宽度

    window.addEventListener('resize',function(){
	let w = document.documentElement.clientWidth
	console.log(w)
})

    Window: resize event – Web APIs | MDN