window.closed
window.closed 检测页面是否被关闭,关闭为true 未关闭为false
window.console
window.console返回一个console对象的引用,console对象提供了向浏览器控制台打印日志的功能,并不展示给用户
console.log('aa') console.dir(obj) //也可以打开一个有排列的对象
window.devicePixelRatio
window.devicePixelRatio属性返回当前设备的无力香色分比例和css像素分辨率的比值,就是像素大小的比例,也就是一个css像素的大小相对于一个物理像素的大小的比值,
就好比iphone分辨率是750X1334 我们的UI给的设计稿也是750X1334但是我们做页面布局的时候会在ui给的设计稿的基础上/2。
因为呢,iphone6的视窗是375x667 所以iphone6的设备像素比 = 750/375 = 2
window.document
window.document指向当前窗口内的文档节点(下一篇文章 会将document)
window.frameElement
window.frameElement f返回嵌入当前window对象的元素(iframe或object),如果当前window已经是顶层窗口则返回null
window.frames
window.frames返回当前窗口,一个类数组对象,列出了当前窗口的所有直接子窗口,比如你页面里面有5个<iframe>标签的页面,那么这个属性就返回了一个数组 里面是你5个iframe
window.fullScreen
window.fullScreen属性表明了窗口是否处于全屏模式下,在全屏模式下返回true 否则返回false,这个属性在特新的浏览器下面才有意义,兼容性很差,火狐1.9后实现全屏模式,全屏模式就是看不到浏览器顶部的放大缩小关闭按钮
window.history
window.history是一个制度属性,用来获取History对象的引用,History提供了操作浏览器历史会话记录的接口
window.history.back() 和 window.history.go(-1) 效果是一样,等于点击一下浏览器回退按钮
window.history.forward() 和 window.histproy.go(1)效果已有,等于点击了一下浏览器前进按钮
window.historiy还有两个方法:
window.historiy.pushState()和window.history.replaceState()。
window.historiy.pushState()方法为浏览器添加一条新的历史记录,并导航到此历史记录页面,
window.history.replaceState()方法是吧当前历史记录改变为某条历史记录,就是不添加新的历史记录。
它们都接受三个参数,
1是 state对象可以在url变了以后的页面通过history.state接受到你给第一个参数传递的对象
2是 title (我感觉没j8用,一半我第二个参数都传null)
3是url 这个url要同源策略,就是不可以改变.com或者.cn等前面的部分
给一个案例,一个页面上有一个h1和一个按钮,h1目前显示为1,点击按钮 h1的值加1
那么声明一个num = 1
history.replaceState({ num: 1 }, null, '?num=1')
这个是 进网站以后直接把网站的url修改为 给网站加了一个查询字符串,并在第一个参数传递了一个对象 num=1
当点击按钮的时候 num++ 然后h1的innerHTML= num
history.pushState({ num }, null, '?num=' + num)
给浏览器添加一条新的历史记录 查询字符串改变 state对象传入num=num
现在点击按钮 h1里面的值就会加1 ,并且给浏览器添加了新的历史记录
那么在用popstate事件来监听浏览器URL改变
window.addEventListener('popstate', function () { num = history.state.num // 这里num的值也可以在查询字符串拿 h1.innerHTML = num })
现在就完成了
const a = document.querySelector('h1') const div = document.querySelector('div') history.replaceState({ num:1 },null, '?num=1') let num =1 div.onclick = function (){ num++ a.innerHTML = num history.pushState({num},null, '?num=' + num) } window.addEventListener('popstate',function(){ num = history.state.num a.innerHTML =num })
点击按钮 h1的值加1 点击后退按钮h1的值-1 在点击前进按钮,浏览器的值又加1.
window.innerHeight
window.innerHeight获取浏览器适口的高度
window.innerWidth
window.innerWidth获取浏览器适口的宽度
window.length
window.length获取页面框架的数量,就是内嵌了几个页面,如果没有内嵌别的页面则返回0
window.localStorage
window.localStorage方法可以帮你储存一些信息在浏览器。此方法遵循同域策略,在相同的域名下,才可以拿到储存在浏览器的信息,
写入: window.localStorage.setItem('name', 'amz')
读取: window.localStorage.getItem('name') // 'amz'
通过 window.localStorage方法储存的信息没有过期事件,如果不主动去浏览器清除缓存 则一直存在
window.sessionStorage
window.sessionStorage和window.localStorage方法很相似
写入window.sessionStorage.setItem('name', 'amz')
读取window.sessionStorage.getItem('name') // 'amz'
唯一不同的是 通过window.sessionStorage方法储存的信息在浏览器关闭则自动被清除了
window.location
window.location只读属性,返回Location对象,其中包含了当前页面的一些位置信息。
例如一个页面地址为http://127.0.0.1:8080/amz/text.html?amz=1
window.location.href // http://127.0.0.1:8080//amz/text.html?amz=1 (完成的url ) window.location.protocol // http (协议) window.location.hostname // 127.0.0.1 (主机名)
window.location.host // 127.0.0.1:8080 (主机名+端口号) window.location.port // 8080 (端口号) window.location.pathname // //amz/text.html (当前url路径部分) window.location.search // ?amz=1(当前url路径的查询部分) window.location.hash // '' (开始的锚点)
window.location.assign() 这个方法很有争议。
有可能安全设置或者跨域资源共享等设置让她失效 mdb上面是这么解释的
window.location.assign(‘https://www.baidu.com/’)这个如果没有安全限制等会加载到百度页面,
但是我尝试 这样会报错,可能是因为 安全设置或者跨域资源共享的原因吧。
但 如果目前在www.qq.com页面 执行window.location.assign(‘club’) 页面会跳转www.qq.com/club
window.location.reload() 方法里面如果传递true则是window.location.reload(true)则强制从服务器重新加载当前页面
window.menubar
window.menubar方法检测浏览器菜单是否关闭
window.name
window.name获取/设置窗口名字,窗口不需要名字,主要是为表单超链接设置目标。这个是mdn的解释。 其实你也可以给window.name存一些全局的值什么的。当然并不建议这么做。
window.navigator
window.navigator返回当前浏览器的一些信息。这个对象可以判断运行当前脚本的设备是什么浏览器是什么等等
window.opener
window.opener返回当前页面是从那个页面打开的,比如a页面链接了b页面,从a页面进入了b页面 则b页面的window.opener就是a。如果当前页面不是通过某一个页面打开的,则返回null
window.outerHeight
window.outerHeight返回当前浏览器的窗口的整体高度
window.outerWidth
window.outerWidth返回当前浏览器的窗口的整体宽度
window.parent
window.parent返回当前窗口的父窗口对象,如果当前窗口是iframe那么他的父窗口就是嵌入他的那个窗口。
window.screen
window.screen返回当前渲染窗口的屏幕有关属性信息
window.screeX
window.screenX返回浏览器左边界到操作系统桌面左边界的水平距离
window.screeY
window.screenY返回浏览器顶部到操作系统桌面顶部的垂直距离
window.scrollbars
window.scrollbars返回滚动条对象的可见性
window.scrollX
window.scrollx返回页面水平方向滚动的像素值
window.scrollY
window.scrollY返回页面垂直方向滚动的像素值
window.self
window.self指向当前window对象的引用。一半情况下这个属性用于判断当前window 是不是父 frameset 中的第一个 frame 类似于 window.parent.frames[0] == window.self
window.top
window.top返回当前窗口对象的最顶层对象,winwo.parent返回当前窗口的父对象。
window.window
window.window返回window自身,包括window.window.window等 都返回自身。
window.alert()
window.alert()接受一个参数,接受进去的参数强制转化为字符串,弹弹出来一个对话框
window.confirm()
window.confirm()方法显示一个具有可选消息,并带两个按钮(确认和取消)的模态对话框,
resut = window.confirm('消息') 其中result是一个布尔值,表示选了确认还是取消
console.log( window.confirm('消息') ? '选了确认' : '选了取消' )
window.prompt()
window.promot()方法用于显示一个对话框,对话框包含一条文字信息,用来提示用户输入文字
result= window.prompt(atext, value)
result 用来储存用户输入的文字,text用来提示用户输入的文字,value是输入框默认的参数
let sign = prompt('你是什么星座') if(sign == '狮子座') {alert('好棒啊 我也是 狮子座')}
window.atob()和window.btoa()
window.btoa()方法来编码一个可能在传输过程中出现问题的数据,
window.atob()方法用于解码
window.blur()
window.blur()方法用于将焦点一处顶层窗口,此方法与用户主动将焦点移出顶层窗口是一样的
window.setInterval()
window.setInterval()大家一半叫他轮训,就是不停的执行。
setInterval(() => {console.log(1)}, 1000) // 一秒输出一个1 。他不停的输出
window.clearInterval()
window.clearInterval()方法用于取消用setInterval设置的定时任务
const a = setInterval(() => {console.log(1)}, 1000) window.clearInterval(a) // 不再一秒输出一个1了
window.setTimeout()
window.setTimeout()方法用于延时执行(其实js执行是有一个栈,每一个代码块都会进入栈里,然后从栈里面一个一个的执行,setTimeout方法的延时,是延时多久吧代码块在入栈。)。
setTimeout(() => {console.log(1)}, 1000) // 一秒后把() => {console.log(1)}入栈,然后等比它早入栈的执行完了,就开始执行它了。所以他不是严格的 延时一秒执行。
window.getComputedStyle()
window.getCOmputedStyle()方法可以获取活动样式表计算后的元素的所有的css值
window.getComputedStyle()接受两个参数
第一个参数,是通过dom选择到的元素节点,
第二个参数是 匹配的伪元素的字符串,如果没有,则用null
window.getComputedStyle(element, null || '::after')
window.getSelection()
window.getSelection()方法返回一个Selection对象,里面有用于选择的文本范围和光标当前位置等信息
window.metchMedia()
window.metchMedia()方法用于媒体查询
if(window.metchMedia("(min- 400px)").matches){...} else {}
window.minimize()和window.moveTo()
window.minimize()方法用于让当前浏览器窗口最小化
window.moveTo()方法用于让当前浏览器窗口恢复正常
window.moveBy()
window.moveBy()方法接受两个值,用于移动当前窗口,第一个值表示窗口在水瓶方向移动的像素值,第二个值,是窗口在垂直方向移动的像素值
window.open()
window.open()方法用于打开一个新的窗口
window.resizeBy()
window.resizeBy()方法调整窗口大小 接受两个值 第一个,为窗口水平方向变化的像素值,第二个是 窗口垂直方向变化的像素值。传入址的值是窗口目前大的上面 加 传入的值。
window.resizeBy(-200, -200) 缩小窗口
window.resizeTo()
window.resizeTo()方法动态调整窗口的大小。接受两个参数,1参数是outerWidth的新值,2参数是outerHeight的新值。
window.resizeTo(window.screen.availWidth/2, window.screen.availheight/2) //窗口设置为整个屏幕的四分之一大小
window.scroll()
windwo.scroll()方法用于将窗口滚动到文档中的特定位置,接受两个参数,1参数是表示左上角的像素点的横坐标,2坐标是左上角像素点纵坐标
scroll(0, 100) 把纵轴上第100个像素置于窗口顶部
window.scrollTo()
window.scrollTo()滚动到文档中的某个坐标,接受2个参数,第一个横轴坐标,第二个纵轴坐标。
window.srollTo(0, 1000)
window.scrollByPages()
window.scrollByPages()方法用于在当前文档页面按照指定的页数翻页。接受一个参数,整数是向下翻,负数是向下翻。
window.stop()
window.stop()方法用于组织文档加载