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=1div.onclick= function(){num++a.innerHTML=num history.pushState({num},null, '?num=' +num)
}window.addEventListener('popstate',function(){num=history.state.numa.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

JavaScript-window相关推荐

  1. JavaScript window

    window -- window对象是BOM中所有对象的核心 window,中文"窗口" window对象除了是BOM中所有对象的父对象外,还包含一些窗口控制函数 全局的windo ...

  2. 网页打印javascript:window.print()

    在做B/S项目开发时.难免会遇到网页打印问题! 可以用css控制, @media print .a {display:block} .b {display:hidden} 好像是这样.把你不想打印的部 ...

  3. Javascript window.fetch API

    Javascript window.fetch API 关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的.虽 ...

  4. html window设置,JavaScript Window

    JavaScript Window - 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型( ...

  5. javascript window.open

    一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name, ...

  6. JavaScript window对象之atob()和btoa()

    javascript原生的api本来就支持Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用.当前html5标准正式化之际,Base64将有较大的转型空间,对于Ht ...

  7. JavaScript window.alert

    文章目录 相关背景 HTML中嵌入JS的第一种方式 实现代码 图是结果 在HTML中插入JS的第二种方式 实现代码 实现结果 HTML中引入JS的第三种方式 实现代码 实现结果 相关背景 HTML中嵌 ...

  8. JavaScript Window Screen

    JavaScript是一种广泛使用的客户端脚本语言,用于在网页中实现动态效果和交互功能.JavaScript可以使用浏览器提供的API来访问和操作网页中的各个元素,例如文本框.按钮.图片等.其中,Wi ...

  9. javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容

    javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容 在制作静态页面的时候,使用window.scroll()来实现点击爬楼的事件 ...

  10. javascript window 属性和方法。

    closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. ...

最新文章

  1. R绘制Rank-abundance曲线
  2. 【Git】Git-常用命令备忘录(三)
  3. Python版快速排序算法
  4. PHP 使用 ZipArchive 将文件打包成 zip
  5. 如何使用迭代器Iterator与增强for循环遍历Map集合?
  6. 图像数字水印技术研究及matlab实现,数字水印技术研究及其matlab仿真.doc
  7. 家居照明行业网络营销怎么搞?
  8. 小程序更新数组操作push、pop、unshift、shift
  9. 【虚幻引擎4(UE4)实用技巧】-关于高亮显示物体轮廓线
  10. html甘特图制作,AnyGantt实例教程——在Web网页中快速创建甘特图
  11. Android朋友圈怎么换行,2020年发朋友圈打字怎么换行
  12. C语言:pow()----计算x的y次方(次幂)
  13. 第十一章 文件操作_C语言插入、删除、更改文件内容
  14. 程序人生(四):洋哥差点被开除的经历
  15. 本地http://localhost打不开怎么办
  16. Python squeeze()函数
  17. 响应式HTML网页开发,web开发中的响应式网页设计
  18. 【Windows】命令行工具
  19. linux分区 最佳实践,SSD:硬盘分区最佳实践
  20. Java 框架,黑马 java 视频教程,面试资料分享

热门文章

  1. 【BIM入门实战】最新《建筑制图与识图》复习题带参考答案(一)
  2. 寒武纪加速平台(MLU200系列) 摸鱼指南(二)--- 模型移植-环境搭建
  3. centos7安装oracle12c
  4. mysql字段约束_mysql数据库之表操作及字段约束条件
  5. 苹果手机各版本分辨率
  6. 智慧社区网格化管理php,智慧社区利用网格化管理实现服务的精细化
  7. 奥睿科硬盘柜linux下识别,云盘不靠谱?是时候换种方式解决存储问题了 — 奥睿科 多盘位硬盘柜阵列柜评测...
  8. 计算机专业和半导体有关吗,半导体是什么意思 研发半导体学什么专业
  9. 德语计算机词汇,德语电脑计算机常用词汇
  10. abb机器人控制箱按键的作用_ABB_机器人控制柜各个部件介绍