[JavaScript] 8.JS BOM对象

原创 2016年05月30日 19:55:45

简介

BOM是browser object model的缩写,简称浏览器对象模型;

BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;

浏览器对象模型(Browser Object Model)尚无正式标准。

结构


window对象

window对象是浏览器对象中其他大部分对象的共同的祖先,所以一般在JavaScript程序中可以省略window对象

常用window对象的方法

open(URL,windowName,parameterList):open方法创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址

close():close方法关闭一个浏览器窗口

alert()等

setTimeout

Specifiesa delay for calling a function or evaluating an expression.

setInterval

Callsa function or evaluates an expression every time the specified intervalelapses.

clearTimeout

Clearsa timeout that was set with the setTimeout method.

clearInterval

Clearsa delay that was set with the setInterval method.

Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
                   <title>akali-javascriptBOM</title>
                   <script>
                            vara;
                            varb;
                            functiontestSetTimeout(){
//                                  a= setTimeout(function(){      //这样直接定义匿名函数最好!可以解决浏览器差异问题!
//                                           alert("3秒后执行!");
//                                  },3000);
                                    
                                    
//                                setTimeout(ttt,3000,"3","5");   //如此传参会有浏览器差异问题。建议仍然使用匿名函数调用。如下:
                                     setTimeout(function(){
                                               ttt(3,4);
                                     },3300);
                            }
                           
                            functionttt(a,b){
                                     alert(a+b);
                            }
                           
                            functiontestSetInterval(){
                                     vari = 1;
                                     b= setInterval(function(){
                                               alert("第"+(i++)+"次执行");
                                     },3000);
                            }
                           
                            functiontestClearTimeout(){
                                     clearTimeout(a);
                            }
                           
                            functiontestClearInterval(){
                                     clearInterval(b);
                            }
                   </script>
         </head>
         <body>
                   <inputtype=button value=测试setTimeout onclick="testSetTimeout();"/>
                   <inputtype=button value=取消setTimeout onclick="testClearTimeout();"/>
                   <inputtype=button value=取消setInterval onclick="testClearInterval();"/>
                   <inputtype=button value=测试setInterval onclick="testSetInterval();"/>
         </body>
</html>

History对象

history含有以前访问过的网页的URL地址。

Demo

<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
                   <title>history对象</title>
         </head>
         <body>
                   <ahref="javascript:void(0);"onclick="javascript:history.go(-1);">后退一个</a>
                   <ahref="javascript:void(0);"onclick="javascript:history.go(1);">前进一个</a>
         </body>
</html>

Navigator对象

使用navigator获取浏览器信息//判断浏览器类型

Demo

function method() {

                                     varc=window.navigator.userAgent.toLowerCase();

                                     if(c.indexOf("msie")>0){

                                               alert("您用的是微软的ie浏览器");

                                     }elseif(c.indexOf("firefox")>0) {

                                               alert("您用的是火狐");

                                     }else{

                                               alert("不知道");

                                     }

                            }

 

location对象

location对象是当前网页的URL地址。我们可以使用Location对象来让浏览器打开某页

具体的语法为

window.location=“xxxx”

这里的xxxx可以是一页也可以是一个网站的IP地址。

Demo

<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
                   <title>UntitledDocument</title>
                   <scriptLanguage="JavaScript">
                            functiontestLocation() {
//                                     alert(window.location);
                                        alert(location);
                            }
                           
                            functiontestLocation1() {
                                     location="http://www.baidu.com";
                            }
                   </script>
         </head>
         <body>
                   <ahref="javascript:void(0);" onclick="testLocation()">测试location</a>
                   <ahref="javascript:void(0);" onclick="testLocation1()">测试location</a>
         </body>
</html>

业务思想

BOM对象的实质对象间的通信,掌握其基本属性和方法,便可以很好地为我们服务。关于BOM对象最为重要的也莫过于其属性和方法,多加练习使用,便可摇摆于其间。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript基础笔记(十七)之js的bom对象

js的bom对象 **bom : broswer object mode1:浏览器对象模型 **有哪些对象? **navigator:获取客户...

JavaWeb - JavaScript,js与html结合方式,js(语句/运算符/数组/string/Array/Math/Date/RegExp/bom对象/全局变量/局部变量)

JavaWeb - JavaScript,js与html结合方式,js(语句/运算符/数组/string/Array/Math/Date/RegExp/bom对象/全局变量/局部变量)...

js中的BOM和DOM对象

  • 2008年06月20日 12:46
  • 12KB
  • 下载

超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

js 对象 浅拷贝 和 深拷贝1.浅拷贝拷贝就是把父对像的属性,全部拷贝给子对象。下面这个函数,就是在做拷贝:var Chinese = {   nation:'中国' } var Doctor = ...

《JavaScript高级程序设计》读书笔记--8-BOM

BOM。浏览器对象模型,提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。window对象BOM的核心对象是window,表示浏览器的一个实例。 全局作用域 在全局作用域中声明的变...

JavaScript高级程序设计之BOM之window 对象之系统对话框 第8.1.7讲笔记

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。系统对 话框与在浏览器中显示的网页没有关系,也不包含HTML。它们的外观由操作系统及(或)浏览器设...

JavaScript中的BOM对象

百度百科 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BO...

JavaScript学习之 BOM(浏览器对象模型)

在全局作用域中声明的所有变量和函数,都会成为window对象的成员。 1、窗口关系及框架 如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集...
  • hslhy
  • hslhy
  • 2012年06月11日 16:41
  • 640

JavaScript高级程序设计之BOM之window 对象之窗口位置第8.1.3讲笔记

用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome 都提供了 screenLeft 和screenTop 属性,分别用于表示窗口相对于屏幕左边和上...

32-JavaScript-DOM-BOM简介-node常用方法和属性-window对象常用方法

- BOM 介绍 - dom 对象    - dom对象简介    - 常用dom对象层次图 - dom对象详解    - window    - event    - document...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[JavaScript] 8.JS BOM对象
举报原因:
原因补充:

(最多只允许输入30个字)