j2ee06js04.Bom浏览器对象（包含document、location、history）

54 阅读 0 评论 36 点赞

我是靠谱客的博主跳跃丝袜，最近开发中收集的这篇文章主要介绍j2ee06js04.Bom浏览器对象（包含document、location、history），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一：基本概念

BOM:b是浏览器，因此bom是浏览器对象模型
   这个对象就是window对象
    1.window节点（对象）下有三个子节点，分别是location，document,history
    2.window对象封装当前浏览器（一个窗口就是一个window对象），document对象封装一个html文档，
     location对象封装浏览器中的地址栏（http://localhost...），history对象封装着是历史记录（也就是前进和后退），封装着以访问过的地址列表
3.改变了地址也就改变了documwent中的内容
4.打开窗口就是创建一个window对象，window是dom树的根节点，因此打开窗口之后就能用window对象中的方法
---方法1.弹出：alert(),相当于window.alert();window由于是根节点，因此可以省略
---方法2：打开窗口：open(),或者window.open();，第一个参数是路径，第二个参数是逻辑名，第三个参数是窗口特征。locaction=1表示显示地址栏，默认是0
                      status表示状态栏（看下边）
---方法3：关闭窗口：close（）
----方法4：确认对话框：confirm()肯佛么当关闭窗口的时候要求弹出是否要关闭：因此需要一个确认对话框.他的值是确定（ture）或者取消（false）
             这个方法经常跟if一起使用
-----方法5：focus()：获得焦点
---方法6和7：开启两种定时器：setInterval():让表达式每经过指定的毫秒数之后执行一次，他有两个参数，一个参数是vocde，表示代码，另一个参数是时间（毫秒），他的返回值是定时器的id
               setTimeout():经过指定毫秒数执行表达式
-----方法8和9：停止定时器：
                -----clearTnterval(),他有一个参数是id，也就是启动定时器时候的返回值
                -----clearTimeout()
toLocaleString()和toLocaleDateString（）:格式化时间，是日期对象的方法（喽口:Locale）

----方法10：提示输入：prompt():他有个返回值，这个返回值就是我们在文本框中输入的内容
---方法11：showModalDialog():产生一个模式窗口（先关闭后才能操作其他窗口）

5.location对象（喽k神）；
     ---location.reload()方法;是刷新的意思，默认参数是false
     -----assign（）方法：重新打开一个新的html页面，参数是个地址
     -----locaction.href属性：是获得当前地址，locaction.href=“”设置地址
6.history对象
     方法1：back（）后退
     方法2：forword（）前进
    属性：length查找长度

第二：代码实现

1.window对象的打开和关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var id=0;
var int;
function myopen(){
   window.open("显示时间.html","","width=200px,heigh=200px,location=1,titlebar=1");
}
function mysetInterval(){
    id=window.setInterval("myopen()",3000);//定时重复打开，返回值是一个int类型的
}
function mycloseInterval(){
   window.clearInterval(id);//关闭浏览器，需要打开浏览器的返回值,也就是说需要打开浏览器时候的id，因此这个id要全局变量
}
function mysetTimeout(){
   int=window.setTimeout("myopen()",2000);//定时打开一次浏览器
}
function mycloseTimeout(){//关闭浏览器，由于window是根节点，因此window可以省略,由于这是执行一次，因此没必要关闭
   clearTimeout(idt);
}

</script>
</head>

<body οnlοad="myopen()">
<div style="text-align:center">
    <h3 align="center">测试window对象</h3>
   <input type="button" οnclick="mysetInterval()" value="重复打开广告"/>
   <input type="button" οnclick="mycloseInterval()" value="关闭重复打开广告"/>
   <input type="button" οnclick="mysetTimeout()" value="定时打开一次浏览器" />
</div>

</body>
</html>

2.location对象和history对象

<body>
<a href="javascript:location.reload(true)">刷新</a>
<a href="javascript:location.assign('adv.html')">重新打开一个网页</a>
<a href="javascript:test()">改变地址栏的地址</a>
<a href="javascript:history.forward()">前进</a>
</body>
</html>