JavaScript-window

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-width: 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()方法用于组织文档加载

转载于:https://www.cnblogs.com/tuspring/p/9706643.html