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() 方法 用科学 ...
随机推荐
- nodejs:grunt使用合并压缩的基本使用
一.模块化历史 1,nodejs出现:主要解决后端js规范 2,commonjs:这个组织出来一些服务器规范 3,后端规范commonjs应用升级到前端commonjs2:cmd规范(seajs)和完 ...
- ASP.NET MVC4系列验证机制、伙伴类共享源数据信息(数据注解和验证)
一,mvc前后台验证 自定义属性标签MyRegularExpression using System; using System.Collections.Generic; using System.C ...
- ci调用application/views下的css,js,图片资源出现You don't have permission to access CodeIgniter on this server解决
原因是view文件下面有个.htaccess文件,里面写的是 Deny from all //拒绝所有请求 自己本地测试的话,就直接去掉,放到服务器就指定application/views文件 ...
- CSS 实现背景图尺寸不随浏览器缩放而变化
<!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...
- HTML: Css引入的四種方式
哪四種?這裏簡單進行下總結 ①寫在 style 標籤中 <style type="text/css"> 這裏是css代碼... </style> ②外部引入 ...
- egrep 查找IP
1. egrep '([^0-9]|\<)(([0-1]?[0-9]{0,2}|([2]([0-4][0-9]|[5][0-5])))\.){3}([0-1]?[0-9]{0,2}|([2]([ ...
- GenderGuesser
http://www.hackerfactor.com/GenderGuesser.php#Analyze
- java中重载和覆盖(又称重写)的区别
初次见到这两个单词并没有什么特别的感觉,但是时间长了,却发现书上一会儿用override,一会儿又用overload,搞得我的迷迷糊.于是就做了个总结,希望能对和我一样对这两个概念模糊不清的网友有一个 ...
- android 定位的四种方式
[原文] 开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面总结了一下网络中现有对于介绍android定位的4种方式,希望对大家有帮助: android 定 ...
- 【转】设计模式 ( 十五 ) 中介者模式Mediator(对象行为型)
设计模式 ( 十五 ) 中介者模式Mediator(对象行为型) 1.概述 在面向对象的软件设计与开发过程中,根据"单一职责原则",我们应该尽量将对象细化,使其只负责或呈现单一的职 ...