位置: 编程技术 - 正文

Javascript之BOM(window对象)详解

编辑:rootadmin

推荐整理分享Javascript之BOM(window对象)详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心。

BOM的核心对象是window,它表示浏览器的一个实例。

在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。也就是说,在网页中定义的任何一个变量、对象和函数以window作为其Global对象。

1.全局作用域

既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象、变量和函数都会变成window的属性和方法。

定义全局变量和在window对象上定义属性还是有差别的:全局变量不能通过delete删除,而在window对象上定义的属性则可以。

在使用var语句添加window属性时,有一个名为[[Configurable]]的特性,这个特性的值被设置为false,因此这样定义的属性不可以通过delete删除。

在尝试访问未声明的变量会抛出错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在。

其实很多全局JavaScript对象如localtion和navigator实际上都是window对象的属性。

2.窗口关系及框架

如果页面中包含框架,则每个框架都有自己的window对象,并保存在frames集合中。

在frame集合中,可以通过数值索引或框架名来进行访问。

就这个例子而言,可以通过window.frames[0]或者window.frames["topFrame"]来引用上方框架。不过最好使用top.frames[0]来访问框架。

top对象始终指向最高(外)层框架,也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。

与top对象相对的还有另一个window对象是parent,parent(父)对象始终指向当前框架的直接上层框架。

还有一个self对象,它始终指向window,实际上self与window可以互相使用,引入self对象的目的就只是为了与top和parent对象对应起来。

所有的这些对象,都是window的属性,可以使用window.parent或window.top使用它们。

3.窗口位置

多数浏览器都提供了screenLeft和screenTop,分别用于表示窗口相对与屏幕左边和上边的位置。FF则在screenX和screenY属性中提供相同的窗口信息,Safari金额Chorme也同时支持这两个属性。

使用下面代码可以跨浏览器取得窗口左边和上边的位置。

值得注意的是,在IE和Opera中screenLeft和screenTop中保存的是从屏幕左边和上边到window对象表示的页面可见区域的距离。在Chrome、FF和Safari中,screenY和screenTop中保存的是整个浏览器对于屏幕的坐标值。

最终结果就是无法在跨浏览器条件下取得窗口左边和上边的精确坐标值。

使用moveTo()和moveBy()方法倒是可以将窗口精确的移动到新位置,两个方法都接收两个参数,moveTo()接收的是x,y轴的坐标,moveBy()接收的是移动的像素。

但是,这两个方法可能会被浏览器禁用。这两个方法也只适用于最外层的window对象,不适用框架。

4.窗口大小

主流浏览器都为确定窗口大小提供了4个属性:innerWidth、innerHight、outerWidth和outerHight。

在IE9+、Safari和FF中,outerWidth和outerHight返回的是浏览器窗口本身的尺寸(无论从哪个框架访问),但在Opera中,这两个属性的值表示页面视图容器的大小(单个标签页窗口的大小)。而innerWidth、innerHight则表示该容器中页面视图的大小(减去边框的宽度)。但在Chrome中,这4个属性都表示视口大小而非浏览器大小。

IE9之前没有提供取得浏览器窗口尺寸的属性;不过它通过DOM提供了页面可视区域的信息。

在IE、FF、Chrome、Opera和Safari中,document.documentElement.clientWidth和document.documentElement.clientHight中保存着页面视口信息。在IE6下,要在标准模式下有效。如果是混杂模式就必须通过document.body.clientWidth和document.body.clientHight取得相同信息。Chrome则不分标准模式还是混杂模式。

虽然最终无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小。

对于移动设备,window.innerWidth和window.innerHight保存着可见视口,也就是屏幕上页面区域的大小。移动IE浏览器则要通过document.documentElement.clientWidth和document.documentElement.clientHight获取相同信息。

使用resizeTo()和resizeBy()方法都可以调整浏览器窗口大小,两个方法都接收两个参数,resizeTo()接收的是浏览器窗口新宽度和新高度,resizeBy()接收的是新窗口和老窗口的宽度差和高度差。

但是,这两个方法可能会被浏览器禁用。这两个方法也只适用于最外层的window对象,不适用框架。

5.导航和打开窗口

window.open()方法既可以打开一个特定的URL,也可以打开一个新的浏览器窗口。该方法接收4个参数:URL,窗口目标,一个特性字符串和一个表示新页面是否取代当前页面的布尔值。

弹出窗口

各项参数

Javascript之BOM(window对象)详解

其中yes/no也可使用1/0;pixelvalue为具体的数值,单位象素。

参数|取值范围|说明

alwaysLowered|yes/no|指定窗口隐藏在所有窗口之后

alwaysRaised|yes/no|指定窗口悬浮在所有窗口之上

depended|yes/no|是否和父窗口同时关闭

directories|yes/no|Nav2和3的目录栏是否可见

height|pixelvalue|窗口高度

hotkeys|yes/no|在没菜单栏的窗口中设安全退出热键

innerHeight|pixelvalue|窗口中文档的像素高度

innerWidth|pixelvalue|窗口中文档的像素宽度

location|yes/no|位置栏是否可见

menubar|yes/no|菜单栏是否可见

outerHeight|pixelvalue|设定窗口(包括装饰边框)的像素高度

outerWidth|pixelvalue|设定窗口(包括装饰边框)的像素宽度

resizable|yes/no|窗口大小是否可调整

screenX|pixelvalue|窗口距屏幕左边界的像素长度

screenY|pixelvalue|窗口距屏幕上边界的像素长度

scrollbars|yes/no|窗口是否可有滚动栏

titlebar|yes/no|窗口题目栏是否可见

toolbar|yes/no|窗口工具栏是否可见

Width|pixelvalue|窗口的像素宽度

z-look|yes/no|窗口被激活后是否浮在其它窗口之上

示例:

脚本运行后,page.html将在新窗体newwindow中打开,宽为,高为,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。

6.间歇调用和超时调用

JavaScript是单线程语言,但它允许通过设置超时值和间歇时间来调度代码在特定时刻执行。前者是在指定的时间过后执行代码,后者则是每个指定的时间就调用一次。

超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID。

调用setTimeout()后该方法会返回一个数值ID,表示超时调用,可以通过它取消超时调用。

间歇调用setInterval()

setInterval()方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID

取消调用clearInterval(),接受一个参数间歇调用ID

尽量用超时调用替代间歇调用

7.系统对话框

警告框alert()

信息框confirm(),有取消,确定按钮

提示框prompt(),用于提示用户输入一些文本

以上这篇Javascript之BOM(window对象)详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。

轻松掌握JavaScript中的Math object数学对象 对于内置的Math数学常项和函数也有一些属性和方法。比方说,Math对象的PI属性会有属性值pi(3....),你可以像这样调用它:Math.PI同理,标准数学函数也

详解JavaScript中this关键字的用法 this是函数内部的一个特殊对象,this引用的是函数据以执行的环境对象(关于环境对象我们会在文章最后作补充说明),在调用函数前this的值并不确定,不

辨析JavaScript中的Undefined类型与null类型 Undefined表示变量已声明,但未被初始化。需要注意的是当使用typeof操作符判断数据类型时,未被声明的变量和未初始化的变量返回的值都为undefinedvarmessa

标签: Javascript之BOM(window对象)详解

本文链接地址:https://www.jiuchutong.com/biancheng/370074.html 转载请保留说明!

上一篇:详解Node.js模块间共享数据库连接的方法(关于node.js中的模块化规范)

下一篇:轻松掌握JavaScript中的Math object数学对象(轻松掌握瓷砖铺贴技术 pdf)

  • 计提税费会计分录怎么填
  • 外购产品视同自产产品办理免抵退税的条件?
  • 加油充值卡发票能入账吗
  • 建造普通标准住宅出售,增值税超过扣除金额的
  • 土地使用权计入存货吗
  • 产品不合格造成客户损失怎么赔付
  • 生产经营期间固定资产报废清理的净损失
  • 对公网银支付方式可以选哪些
  • 开过的增值税发票丢失
  • 提前报废资产损失税前扣除
  • 外出经营活动税收管理证明和跨区域涉税事项报告表
  • 政府机关开票是普票还是专票
  • 多缴纳的印花税退回来怎么做分录
  • 纳税人如何网上申请预填报服务
  • 产值等于营业额吗
  • 少付的运费如何做分录
  • 发工资时忘记扣个税了怎么做账
  • 企业其他应付款增加说明什么
  • win11电脑下载的软件桌面没有图标怎么办
  • 超市发购物卡给员工会计分录
  • 分配的水电费属于什么会计要素
  • 使用时间
  • php解析xml文件
  • 华为鸿蒙harmonyos官网4.0升级
  • linux太卡顿
  • 怎么用U盘装系统win7
  • 房地产预售阶段怎么开具发票
  • 税后利润是股东权益吗
  • win11中文安装包
  • 此设备某些文件可能存在问题
  • 本地运行库是什么
  • 薰衣草 英国
  • 生产企业可以抵扣进项税的
  • 事业单位财政专项资金可以用于职工社保
  • 小规模报税系统登录
  • 其他债权投资减值可以转回吗
  • yolo v1 pytorch源代码
  • 本地部署gpt4
  • vue3用法
  • 再生资源增值税退税优惠政策
  • 建筑工程价款结算
  • 公司的钱借给个人必须要有利息吗
  • 应收应付对冲的会计分录
  • 限定性净资产是指什么
  • css代码基础
  • phpcms不支持https怎么办
  • 织梦技巧
  • 个税系统更新在哪里
  • linux 升级软件
  • 通行费抵扣进项税怎么做账
  • 税款减免怎么做分录
  • 销售退款现金流量表
  • 发票未到货已入库会计分录 原材料
  • 替别人公司开发票违法吗
  • 本月无收入还用结转吗
  • 内部交易内部交易收益造成的当期折旧的多计额
  • 水费能抵扣进项税吗
  • 企业对私账户合法吗
  • 营改增之后还有营业税金及附加吗
  • 红字发票开出的单价可以比蓝字发票高吗?
  • 帮客户支付的机票计入什么科目
  • 企业的盈余公积包括哪些
  • mysql中的rand函数
  • centos6.4下mysql5.7.18安装配置方法图文教程
  • brasil.exe是什么进程
  • win7出现问题
  • Win10 Mobile RS2预览版WiFi设置页面将和pc页面相同
  • qtzgacer.exe - qtzgacer进程是什么文件 .作用是什么
  • 845主板支持1t硬盘吗
  • 怎么降到windows7
  • linux内核编程指南
  • unable to instantiate default
  • perl脚本教程视频
  • promise实例方法
  • jquery可以实现哪些效果
  • jquery瀑布流代码
  • 命令行执行bat文件
  • 设置自定义
  • 我的电脑软件下载
  • 贵州房产备案信息查询网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设