BOM对像

window对像

window对象有双重角色,既是一个浏览器的对外接口,也是ECMAScript规定的全局对像。在全局作用域声明的方法,变量都是window对像的属性和方法。定义的全局变量和通过window.property定义属性是有区别的,定义的全局变量有个[[Configurable]]特性值为false,因而不能通过delete删除(wm平台IE不允许通过window.property = value 来申明全局变量)
 var test = 'global1';
 console.info(test);//global
 window.test = 'replace';
 console.info(test);//replace
 console.info(window.test)//replace
 var deletetest = '123';
 delete deletetest ;//false
 window.deletetest= '123';
  delete deletetest ;//true
  • 窗口的关系

    页面中包含框架,则每个框架都有自己的window对像,并且保存在frames集合中。每个window对像都有name属性包含框架的名称.全局变量top始终指向最外层的框架即为浏览器窗口,parent指向当前框架色直接上层框架。在没有框架的情况下parent和top指向同一个window.
    
  • 窗口位置大小

    • 窗口位置
    属性解释IESafariOperaChromeFirefox
    screenLeft窗口相对于屏幕左边的位置YYYYN
    screenTop窗口相对于屏幕上边的位置YYYYN
    screenX窗口相对于屏幕左边的位置NYY(于screenLeft不对应)YY
    screenY窗口相对于屏幕上边的位置NYY(于screenTop不对应)YY

    在IE,Opera中screenLeft,screenTop表示屏幕左边和右边到window对像表示页面可见区域的距离(包含浏览器工具栏),在FireFox,Chrome,Safari中screenY或screenTop保存的是浏览器窗口到屏幕的相对距离。
    框架中FireFox,Chrome,Safari始终返回页面每个框架的top.screenX和top.screenY每次结果一致。而IE,Opera会返回框架相对于屏幕边界的精确值。
    moveTo,moveBy接收两个参数精确移动到新的位置。

    • 窗口大小
    属性IESafariOperaChromeFirefox
    innerWidthIE9+页面视图大小页面视图大小页面视图大小页面视图大小
    innerHeightIE9+页面视图大小页面视图大小页面视图大小页面视图大小
    outerWidthIE9+浏览器窗口本身的尺寸浏览器窗口本身的尺寸页面视图大小页面视图大小(innerWidth相等)浏览器窗口本身的尺寸
    outerHeightIE9+浏览器窗口本身的尺寸浏览器窗口本身的尺寸页面视图大小页面视图大小(innerHeight相等)浏览器窗口本身的尺寸
    //在IE,Chrom,Safari,Opera,Firefox中document.documentElement.clientXX保存页面的视口信息,在IE6这些属性在标准模式有效,在混杂模式通过 document.body.clientXX
    var pageWidth = window.innerWidth,pageHeight = window.innerHeight;
    if (typeof pageWidth != 'number'){
         if(document.compatMode == 'CSS1Compat'){
          pageWidth = document.documentElement.clientWidth;
          pageHeight = document.documentElement.clientHeight;
    }
    else{
         pageWidth = document.body.clientWidth;
         pageHeight = document.body.clientHeight;
    }
    }

    resizeTo(),resizeBy()调整窗口大小

  • 弹出框和打开窗口

    • 弹出窗口window.open()
    设置说明
    fullscreenyes/no仅限IE,窗口是否最大化
    heightnumber窗口高度>=100
    leftnumber左坐标,不能为负
    locationyes/no是否显示地址栏
    menubaryes/no显示菜单栏。默认no
    resizableyes/no拖动改变浏览器大小,默认no
    scrollbarsyes/no是否允许滚动,默认no
    statusyes/no显示状态栏,默认no
    toolbaryes/no显示工具栏,默认no
    topnumber窗口上坐标,不能负
    widthnumber窗口宽度>=100

    window.open() 返回新窗口window,新窗口window.opener指定原始窗口,弹出窗口被屏蔽window.open()可能会返回null

    • 对话框
      alert(),confirm(),prompt()调用系统对话框显示信息,
      confirm()调用警告框返回一个布尔值,点击ok返回true
      prompt()提示框 ,返回输入值
      window.print()显示打印对话框
      window.find()显示查找对话框

location对象

localtion对象提供当前窗口中加载的文档有关的信息,既是window对像属性,也是document对象的属性
  • location属性
属性名例子说明
hash‘#contents’返货URL中的hash(#后面的字符串)
host‘127.0.0.0:80’服务器名称和端口号
hostname‘127.0.0.0’服务器名称
hrefhttp://127.0.0.0页面完整URL
pathname‘/index/’URL的目录和文件名
port8000端口号
protocol‘http’协议
search‘?wd=javascript’查询字符串

location.assign(url)打开新的url并在浏览器历史中生成一条记录,location.href或者window.location设置一个url,也会调用assign(),location.replace(url)不会生成历史记录不能回到前一个页面。loacation.reload()重新加载当前页面。

这里写图片描述
这里写图片描述

screen对象

这里写图片描述
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值