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

  • 相关阅读:
    Qt5.3.2(VS2010)_调试_进入Qt源码
    Qt5.3.2(VS2010)_调试_遇到的问题
    Qt_QString::split测试
    Qt_QString.indesOf和mid测试
    激活_目标窗口
    DrawDibDraw__ZC测试
    【转】DrawDibDraw
    数学运算_基本_01
    get和post请求及进程和线程及cookie和session的区别
    Redis性能优化之redis.cnf配置文件
  • 原文地址:https://www.cnblogs.com/tuspring/p/9706643.html
Copyright © 2020-2023  润新知