[JavaScript] 8.JS BOM对象

最新推荐文章于 2024-07-16 19:07:40 发布

吴士龙

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量1.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wsl211511/article/details/51540540

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简介

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 οnclick="testSetTimeout();"/>
                   <inputtype=button value=取消setTimeout οnclick="testClearTimeout();"/>
                   <inputtype=button value=取消setInterval οnclick="testClearInterval();"/>
                   <inputtype=button value=测试setInterval οnclick="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);"οnclick="javascript:history.go(-1);">后退一个</a>
                   <ahref="javascript:void(0);"οnclick="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);" οnclick="testLocation()">测试location</a>
                   <ahref="javascript:void(0);" οnclick="testLocation1()">测试location</a>
         </body>
</html>