JavaScript(8) BOM
2014-11-05 12:15
148 查看
BOM:Browser Object Model(浏览器对象模型)
BOM 提供一组功能,以使 Javascript 可以访问控制网页内容无关的浏览器功能,虽然浏览器都支持 BOM,但是 BOM 并没有形成统一的标准,这也是前端程序员的苦恼之一。BOM的重要对象有这些:window,location,navigator,screen,history.
window Object
-- Globalwindow对象是 BOM 的核心,它表示浏览器的一个实例。而对于javascript,它也是 Global 对象,所有全局定义的对象实际都是挂在window下。下面的代码说明在window下定义对象的三种方法。
//使用var定义全局变量 var g_pro1 = 123; //直接在window下添加变量 window.g_pro2 = 456; //直接给未定义对象赋值 g_pro3 = 789; //三种定义的不同点 var pro1pro = Object.getOwnPropertyDescriptor(window,"g_pro1"); alert(pro1pro.configurable.toString());//false var pro2pro = Object.getOwnPropertyDescriptor(window,"g_pro2"); alert(pro2pro.configurable.toString());//true var pro3pro = Object.getOwnPropertyDescriptor(window,"g_pro3"); alert(pro3pro.configurable.toString());//trueg_gro3 = 789;这种定义方式在 strict 模式下会报错。
-- window position
window(这里指的是浏览器window)的位置,有以下基本访问和控制方法
window.screenLeft(有的浏览器支持window.screenX):window距离屏幕左边界的像素,这个值也很讲究,无非是带边界不带边界,反正很烦人,下面的screenRight雷同。
window.screenTop(有的浏览器支持window.screenY):window距离屏幕上边界的像素。
window.moveTo(numb1,numb2):将window左上角移动到(numb1,numb2)位置。
window.moveBy(numb1,numb2):将window左移numb1个像素,下移numb2个像素。
因为BOM网页内容无关,所以可以直接打开浏览器按F12在命令行输入中测试,需要注意的是Firefox和Chrome因为什么鸟policy的原因,只有用window.open(URL)打开的窗体才可以使用position reset 的命令,而IE(我测试的版本是IE11)可以直接生效。
-- window size
window的size有以下访问控制方法
window.outerWidth:浏览器的宽度。
window.outerHeight:浏览器的高度。这一对属性表示的浏览器的size,所以在不在frame中访问没有影响。
window.innerWidth:window的可显示屏幕的宽度,注意滚动条什么的是浏览器的东东,不属于window显示范围。
window.innerHeight:window可显示屏幕的高度,同样的,状态样工具条收藏栏之类的也不属于window的显示。
window.resizeTo(numb1,numb2):重设浏览器的大小为(numb1,numb2)。
window.resizeBy(numb1,numb2):重设浏览器的大小,宽加上numb1,高加上numb2。
控制命令经常被浏览器禁止。比如上面的命令中,IE11下,resizeBy就被禁止了。
-- navigating and opening window
window.open()方法即能用来导航到特定的URL又能打开一个新的浏览器窗口,它有四个可选参数,依次为:
URL:打开窗口的地址。
window target:从何处打开。
features:特性字符串。
replace:一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。
window.open返回对打开窗口的引用:
var newWin = window.open("http://www.baidu.com","","height=400,width=400,top=100,left=50,location=false");现在你可以用newWin.close()来关闭打开的窗口(此 close 方法只能运用于window.open打开的窗口)。
注意:基本所有的浏览器都会禁止自发运行的window.open(),多数浏览器都不提示(IE会提示,阻止了一个弹窗)。而用户触发的弹窗不会被阻止,比如一个按钮的onclick事件。
-- Intervals and Timeouts
我记得上大学的vb6.0院选修课,有个timer的控件,它的一个属性叫interval,我是个懒人,一直没有查它的意思,只是知道设置了它为x,那么每经过xms,timer中的代码就会执行一次。然后慢慢地我知道了它大概是什么意思。
window.setInterval(process,times):每经过times时间间隔,执行一次process。它的返回值是一个 intervalID,可以用来取消 interval 的运行。
//刷新时间 var intervalID = setInterval(function(){ //我的html页面上有个元素,<a id="clock"></a> document.getElementById("clock").innerHTML=(new Date()).toString(); },1000); //调用下面这个函数会终止上面的interval,你可以用一个button来调用它 function destroyClock(){ window.clearInterval(intervalID); }window.setTimeout(process,times):times时间之后,执行一次process。返回一个timeoutID,可以在时间未到之前取消它。
var timeoutId=setTimeout(function(){alert("3 minums pasts");},3000); function destroyTimeout(){ clearTimeout(timeoutId); }
实际编程中,interval用的很少,基本不用。原因是在间歇调用中,假如process的时间超过了time,那么后面一个process会在前一个process结束前被调用。一个替代方案是用setTimeout来模拟间歇调用:
function IntervalSimulate(maxCycle){ console.info(maxCycle); if (maxCycle) { window.setTimeout(IntervalSimulate(maxCycle-1),1000); }; } IntervalSimulate(3);
-- Dialogs
有三种dialog:alert,confirm,prompt
同一个Dialog,在不同的浏览器中打开效果不一样。此对话框是操作系统或浏览器相关,与网页无关。而且在弹出的时候会阻断javascript的执行,直到dialog被关闭,才会继续执行。
还有两种浏览器的dialog,很少用:window.print ——打印对话框,window.find ——查询对话框。
Location Object
这里的location指的是定位,程序文档中 position 和 location 翻译成中文,有时会译成同样的语义,建议这些人最好不要再翻译技术文献。location用来描述控制window对象的URL定位信息:host,hostname,href,port...
location对象并没有什么值得注意的地方,详见 http://www.w3schools.com/js/js_window_location.asp
Navigator Object
Navigator翻译成中文非常不能表达它的意义,所以我就用Navigator。它是检测浏览器本身信息、设置浏览器的对象,不同的浏览器支持的方法差异比较大,在编程时应参阅详细的文档。比较常见的有以下属性方法:
appCodename:浏览器的名字,比如 chrome,ie 这些。只读。
appName:浏览器完整名称。只读。
cookieEnabled:cookie是否可用,只读。
javaEnabled():java是否可用。只读。
platform:浏览器运行在什么系统上。只读。
plugins:浏览器上安装的插件,是个数组。只读。
下面是在chrome控制台下直接输入的命令查看plugins数组:
History Object
浏览历史。一般浏览器都有回退按钮,可以回到前面访问的网页。这些信息和动作由History控制。history.back();//回退一步 history.forward();//前进一步 history.go(2);//前进两步 history.go(-1);//回退一步 history.length;//共有多少条记录
相关文章推荐
- JavaScript学习总结(三)BOM和DOM详解
- JavaScript——你理解的js基础是啥(JavaScript(核心、BOM、DOM))
- javaScript实现定时显示隐藏、BOM对象方法介绍、表单简单校验、表格换色、DOM、二级联动
- JavaScript基础与DOM、BOM
- 24、Javascript BOM
- JavaWeb-03(JavaScript 和BOM)
- JavaScript 浏览器对象模型BOM1
- JavaScript之Bom
- JavaScript补充:BOM(浏览器对象模型)
- 深入JavaScript(四)之BOM
- JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)
- webBasic_javaScript_day03_定时器_BOM_DOM基础知识
- 3.27 学前端 JavaScript之BOM对象
- JavaScript(04): BOM和DOM
- 前端基础 JavaScript Function、BOM对象 笔记
- JavaScript之BOM(浏览器对象模型)
- JavaScript学习——BOM对象
- (4)JavaScript加强(二部分:BOM编程,事件编程)
- JavaScript高级程序设计之BOM之window 对象之间歇调用和超时调用 第8.1.6讲笔记
- Javascript之BOM详解