liaooo

标签： Web API

  • 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

  • scroll/offset/client获取宽高、位置

    scroll

    获取宽高

    scrollWidth

    只读

    Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。

    scrollWidth的值等于内容的width + padding（包含伪元素，不包含滚动条）

    注意是内容的宽度，包括溢出的内容，无论是否隐藏溢出的内容.（scrollHeight同理）

    Element.scrollWidth – Web API 接口参考 | MDN

    scrollHeight

    只读

    Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

    scrollHeight的值等于内容的height + padding（不包含滚动条）

    Element.scrollHeight – Web API 接口参考 | MDN

    获取位置

    scrollTop

    读 / 写

    Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数.

    • 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。
    • 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0.

    简单理解：向下滚动多少

    例：

    //检测页面滚动的头部距离(被卷去的头部)
document.documentElement.scrollTop

    Element.scrollTop – Web API 接口参考 | MDN

    scrollLeft

    读 / 写

    Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

    Element.scrollLeft – Web API 接口参考 | MDN

    offset

    获取宽高

    offsetWidth / offsetHeight

    只读

    offsetWidth是测量包含元素的边框(border)、内边距(padding)、滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值，不包含伪元素.

    它等于元素实际展现的宽度 / 高度

    例：

    <!-- css -->		
<style>
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 1px solid #333;
}
</style>

<!-- html -->
<div class="box"></div>

<!-- js -->
<script>
	let box = document.querySelector('.box')
  console.log(box.offsetWidth)   // 122 = width + padding + border
	console.log(box.offsetHeight) // 122 =  height + padding + border
</script>

    HTMLElement.offsetWidth – Web API 接口参考 | MDN

    HTMLElement.offsetHeight – Web API 接口参考 | MDN

    获取位置

    offsetTop / offsetLeft

    只读

    获取元素距离自己定位父级元素的上 / 左距离

    如果都没有则以文档左上角为准

    拓展阅读：HTMLElement.offsetParent – Web API 接口参考 | MDN

    client

    获取宽高

    clientWidth / clientHeight

    只读

    获取元素的可见部分宽高(不包含边框，滚动条等)

    Element.clientWidth – Web API 接口参考 | MDN

    获取位置

    clientTop / clientLeft

    只读

    获取上边框border和左边框border宽度