当前位置:首页 > Javascript技术文章 > Javascript之BOM(window对象)详解

实例详解Javascript之BOM(window对象)

  • 发布时间:
  • 作者:码农之家原创
  • 点击:77

这篇文章主要知识点是关于javascript、BOM、window对象、JavaScript中BOM对象原理与用法分析 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

你不知道的JavaScript 下卷

本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

查看详情

Javascript之BOM(window对象)详解

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

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

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

1.全局作用域

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

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

var age=28; 
window.color="red"; 
//在IE<9是抛出错误,在其他浏览器中都返回false 
delete window.age; 
//在IE<9是抛出错误,在其他浏览器中都返回true 
delete window.color;  //return true 
 
alert(window.age);   //28 
alert(window.color);  //undefined 

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

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

//这里抛出错误,因为oldValue未声明 
var newValue=oldValue; 
//这里不会抛出错误,因为这是一次属性查询 
var newValue=window.oldValue   // alert(newValue); //undefined

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

2.窗口关系及框架

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

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

<html> 
<head> 
  <title>Frameset Example</title> 
</head> 
<frameset rows="160,*"> 
  <frame src="frame.htm" name="topFrame"> 
  <frameset cols="50%,50%"> 
    <frame src="anotherframe.htm" name="leftFrame"> 
    <frame src="yetanotherframe.htm" name="rightFrame"> 
  </frameset> 
</frameset> 
</html> 

就这个例子而言,可以通过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也同时支持这两个属性。

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

var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX; 
var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY; 

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

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

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

//将屏幕移动到左上方 
moveTo(0,0); 
//将窗口左移50px 
moveBy(-50,0); 

但是,这两个方法可能会被浏览器禁用。这两个方法也只适用于最外层的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则不分标准模式还是混杂模式。

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

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; 
  } 
} 
 
alert("Width: " + pageWidth); 
alert("Height: " + pageHeight); 

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

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

//调整到100*100 
resizeTo(100,100); 
//调整到200*150 
moveBy(100,50); 

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

5.导航和打开窗口

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

弹出窗口

各项参数

其中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|窗口被激活后是否浮在其它窗口之上

示例:

window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') 

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

6.间歇调用和超时调用

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

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

setTimeout( function () { 
alert("你好!"); 
},1000); 

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

var timeOutId = setTimeout( function () { 
alert("你好!"); 
},1000); 
 
clearTimeout(timeOutId); 

间歇调用setInterval() 

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

setInterval( function () { 
alert("你好!"); 
},1000); 

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

 

var intervalId = null; 
var span = document.createElement("span"); //创建span节点 
span.Id="time"; //设置span的id 
document.body.appendChild(span); //body内添加span 
function incrementNumber () { 
var now = new Date(); 
var timeStr = now.toLocaleTimeString(); 
span.innerText =timeStr; 
num++; 
if (num == 10) { 
clearInterval(intervalId); //十秒后时间不变了 
} 
} 
intervalId = setInterval(incrementNumber,1000); 

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

var num = 0; 
var max = 10; 
function incrementNumber() { 
num++; 
if (num<max) { 
setTimeout(incrementNumber,1000); 
} else { 
alert("OK"); 
} 
} 
setTimeout(incrementNumber,1000); 

7.系统对话框

警告框alert() 

alert("欢迎光临!"); 

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

if (confirm("你同意吗?")) { 
alert("同意"); 
} else { 
alert("不同意"); 
} 

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

var result = prompt("您尊姓大名?"," "); 
if (result !== null) { 
alert(“欢迎光临,”+result); 
} 

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

JavaScript中BOM对象原理与用法分析

本文实例讲述了JavaScript中BOM对象原理与用法。分享给大家供大家参考,具体如下:

  • 百度百科

BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

  • 我的理解

博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScript内置的对象,而是浏览器生成的对象。如果需要了解内置对象的话,可以翻阅我的另一篇博文。

  • 图解BOM

BOM对象还分为以下这几个子对象,说实话,图有点丑,下面我将详细的介绍一下这几个子对象。

JavaScript中BOM对象原理与用法分析

  • window对象

常用操作

window.alert('hello');//弹出警告框
window.confirm(text);//弹出确认对话框,返回布尔值
window.prompt(text,defaultstr);//弹出输入框,并返回输入内容
window.close();//关闭当前页面
window.print();//打印操作

注意:在申明变量的时候,所有在最外层申明的变量(非函数中)都属于window对象的属性,比如。

<script>
var str = 'China';//最外层变量,就是window对象的属性
console.log(str);//输出:China
console.log(window.str);//输出:China
</script>

  • navigator对象(包含浏览器信息的对象)

常用属性

appCodeName:内部代码
appName:浏览器名称
cookieEnabled:cookie是否可用
userAgent:用户代理信息

  • location对象(浏览器地址栏对象)

常用属性

host:主机名
href:地址链接,可以使用此属性实现页面跳转
pathname:地址路径
search:参数信息

页面跳转

window.location.href='http://www.webbc.win';//页面跳转

  • history对象(历史记录对象)

属性

length:历史记录的数目

常用方法

back():后退一页
forword():前进一页
go(num):指定跳转到哪一页,如果参数是正数就代表向前翻一页,如果是负数代表向后翻一页

  • screen 屏幕对象

常用属性

height:高度
width:宽度
availHeight:可用高度
availWidth:可用宽度

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到JavaScript中的call、apply方法、 echarts中箱线图的分析与绘、 让JS验证密码不能为空的实、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JS正则表达式整理

下一篇:javascript的写法总结

展开 +

收起 -

Javascript之BOM 相关内容
windows10下mysql 8.0下载及安装配置教程

这篇文章主要介绍了windows10下mysql 8.0 下载与安装配置图文教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情
Windows 10上JDK环境安装配置流程详解

这篇文章主要为大家详细介绍了Windows 10上JDK环境安装配置图文教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情
Linux/UNIX和Window平台上安装Mysql步骤详解

这篇文章主要为大家详细介绍了Linux/UNIX和Window两个系统上采用命令安装Mysql的方法,感兴趣的小伙伴们可以参考一下

查看详情
windows 10下安装mysql 5.7.17的简单笔记

之前一直在Linux下用MySQL,安装也很简单,今天试一下windows下安装,发现有很多坑,今天小编通过本教程给大家记录下,一起看看吧

查看详情
JavaScript基础教程

本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

查看详情
JavaScript编程全解

JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题,无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

查看详情
21天学通HTML+CSS+JavaScript Web开发

21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

查看详情
JavaScript函数式编程指南

这书关键介绍怎样根据ECMAScript6将函数式编程关键技术于编码,以减少编码的多元性。这书共三一部分內容。*一部分函数式观念是为第二一部分的学习培训作铺垫的,这一部分引入了对函数式

查看详情
同构JavaScript应用开发 查看详情
JavaScript启示录

《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

查看详情
学习JavaScript数据结构与算法 查看详情
Javascript之BOM 学习笔记
网友NO.814346

深入学习JavaScript中的bom

BOM(Broswer Object Model) 凡是 window 的属性和方法,均可以省略“window.” 方法: 框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用,表示父窗口的window对象 window.opener window.opener.fatherSayHello(); 调用父窗口的方法window.opener.a 3.关闭当前窗口 window.close() window.close(); 关闭当前window.opener.close(); 关闭父窗口 定时任务 1.定时任务 var taskid = window.setTimeout(function,ms);window.setTimeout("alert('hello!')", 5000); 2.间隔执行任务 var taskid = window.setInteval(function,ms); 3.清除定时任务 window.clearTimeout(taskid); 4.清除间隔执行任务 window.clearInteval(taskid); 打印屏幕 //长*宽console.log(screen.width + "*" + screen.height) 后退 window.history.back(); 前进 window.history.forward(); 刷新 window.location.reload();//刷新window.location.href = ……

网友NO.374251

JavaScript 浏览器对象模型BOM使用介绍

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM的核心对象是window,它表示浏览器的一个实例;// window对象处于JavaScript结构的最顶层;// 对于每个打开的窗口,系统都会自动为其定义window对象;// window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法;// PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存在; var newValue = oldValue; // =ReferenceError:oldValue is not defined; var newValue = window.oldValue; // =undefined; 1.window对象的属性和方法 window对象有一系列的属性,这些属性本身也是对象; (1).属性 属性……

网友NO.253215

JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

一、JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,它遵循ECMAScript标准。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能。 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性。如Blade:一个Visual Studio扩展,可以将C#代码转换为JavaScript,Ceylon:一个可编译为JavaScript的、模块化的、静态类型JVM语言。 JavaScript是一种可以同时运行在前端与后台的语言,如Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境(类似Java或.NET)。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 1.1、javascript组成 ECMAScript,描述了该语言的语法和基本……

网友NO.559659

javascript的BOM

javascript的BOM ECMAScript是 JavaScript的核心,但如果要在 Web中使用 JavaScript,那么 BOM(浏览器对象模型)则无疑才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。多年来,缺少事实上的规范导致 BOM既有意思又有问题,因为浏览器提供商会按照各自的想法随意去扩展它。于是,浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在,很大程度上是由于它们提供了与浏览器的互操作性。W3C为了把浏览器中 JavaScript最基本的部分标准化,已经将 BOM的主要方面纳入了 HTML5的规范中。 ps:上面摘抄于《javascript高级程序设计》,BOM是浏览器的窗口对象,提供了很多窗口处理的API。在webapp框架越来越多的情况下,需要我们在同一窗口处理不同页面、不同的ajax数据,则需要我们熟悉BOM的内容。 1、wind……

网友NO.164304

JavaScript中BOM对象原理与用法分析

本文实例讲述了JavaScript中BOM对象原理与用法。分享给大家供大家参考,具体如下: 百度百科 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。 我的理解 博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScript内置的对象,而是浏览器生成的对象。如果需要了解内置对象的话,可以翻阅我的另一篇博文。 图解BOM BOM对象还分为以下这几个子对象,说实话,图有点丑,下面我将详细的介绍一下这几个子对象。 window对象 常用操作 window.alert('hello');//弹出警告框window.confirm(text);//弹出确认对话框,返回布尔值window.prompt(te……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757