JavaScript学习笔记之BOM
BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空间下。
一,window窗口相关设置
1)获取浏览器窗口在显示屏的位置
根据浏览器不同,可以采用screenLeft,screenTop或者screenX,screenY,跨浏览器的代码如下:
//获取浏览器的位置 var leftPos=(typeof window.screenLeft =='number')?window.screenLeft:window.screenX; var topPos=(typeof window.screenTop =='number')?window.screenTop:window.screenY;
2)移动浏览器窗口的位置
moveTo,moveBy.不过该方法一般浏览器是禁用的
3)获取浏览器窗口大小,以及浏览器页面视口的大耵浏览器窗口的大小
不同浏览器的实现方法不同,最终无法确定浏览器窗口本身的大小,但是可以取得页面视口的大小
//获取浏览器视口的位置 var pageWidth=document.innerWidth; var pageHeight=document.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(pageWidth+","+pageHeight);
4)调整浏览器窗口大小
可以利用resizeTo()和resizeBy()两个方法,不过这个方法一般也是被禁用的。
二、window相关的全局对象
1.location对象
1)location即是window的属性,也是document的属性,代表当前页面的访问地址
2)locaiton可以通过host,href,pathname,protocol,search等属性,访问当前url地址的相关字段
3)location可以改变当前的访问地址。多采用location.href="新地址"
4)location.reload()重新加载页面
2.navigation对象
代表浏览器应用,可以查询浏览器的版本,名称等。在实际中应用不多。
3.history对象
该对象保存着用户的上网历史,history.go(-n),history.go(n),如果仅仅前进/后退一步,可以使用back(),forward(),来模仿浏览器的前进/后退操作。
三、window相关的全局函数
1.Math,Date等对象提供的相关工具函数
2.window.open()弹出框函数,该方法可以导航到一个特定的url,可以打开一个新的浏览器窗口,接受四个参数,URL,窗口目标,一个特性字符串("_self,_blank,_parent等"),以及是否在浏览器历史记录中记录当前加载页面的布尔值。有些时候,弹出窗会受限于浏览器的安全限制。
3.间歇调用和超时调用
setTimeOut():接受两个参数,函数以及经过多长时间后该函数被调用
setInterVal():接受两个参数,函数以及每间隔多长时候该函数被调用一次
4,系统相关对话框
alert(),confirm(),prompt()
这几个对话框的外观由浏览器决定,而不是由css决定,同时,这些对话框都是同步和模态的,也就是说,显示这些对话框的时候,代码会停止运行,直到关闭这些对话框。
JavaScript学习笔记之BOM的更多相关文章
- JavaScript学习笔记之BOM对象
目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...
- JavaScript学习笔记(13)——BOM
1.window 所有浏览器都支持window对象,它表示浏览器窗口本身. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属 ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
随机推荐
- HDU 2159 FATE(二维费用背包)
FATE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- PHP 错误与异常 笔记与总结(6)将错误日志保存在系统日志中
[将错误记录到系统日志中] 在 php.ini 中将 error_log 设置为: error_log = syslog 或者在运行时使用 ini_set() 函数设置. [例1] <?php ...
- JS中基本window对象操作
---恢复内容开始--- 一.使用window中的属性时 window.属性,直接跟属性名.而调用window的函数时 window.hanshu(): 要在其函数名后面加括号. 二.windo ...
- Android获取手机制作商,系统版本等
在开发中 我们有时候会需要获取当前手机的系统版本来进行判断,或者需要获取一些当前手机的硬件信息. android.os.Build类中.包括了这样的一些信息.我们可以直接调用 而不需要添加任何的权限和 ...
- Iphone H5上传照片被旋转
最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...
- linux实现c多进程
线程(thread)技术早在60年代就被提出,但真正应用多线程到操作系统中去,是在80年代中期,solaris是这方面的佼佼者.传统的Unix也支持线程的概念,但是在一个进程(process)中只允许 ...
- Redis学习笔记--五种数据类型的使用场景
String 1.String 常用命令: 除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操作: 获取字符串长度 往字符串append内容 设置和获取字符串的某一 ...
- Let's Encrypt这个免费的证书签发服务
使用的是Let's Encrypt这个免费的证书签发服务,按照这里的教程一步步照着来,很快就完成了. 迁移过程总体来说比较顺利,只是遇到了两个不大不小的坑.一个是域名的跳转问题,迁移完成以后对于所有h ...
- 【Android开发学习笔记】【随笔】UI线程
概念 UI线程 是Android中的主线程,涉及到UI方面的一些操作都需要在ui线程中进行操作 在非ui线程中想操作ui,就会报错 android.view.ViewRoot$CalledFromWr ...
- Linq&Lumda---LINQ to DataSet的DataTable操作
1. DataTable读取列表 DataSet ds = new DataSet();// 省略ds的Fill代码DataTable products = ds.Tables["Produ ...