JS浏览器对象模型BOM——且听风吟720

BOM（Browser Object Model），浏览器对象模型

1.window对象

1.1 简介

• window是浏览器的一个实例
  • 是通过JS访问浏览器窗口的接口
  • ECMAScript的全局对象

1.2 方法

1.2.1 alert

• 显示一个带有消息的警告框
• 文本中的换行用/n实现

window.alert("请离开！");

1.2.2 confirm

• 显示一个带有确认和取消按钮的指定消息的对话框，返回布尔值
  • 点击确认，返回true
  • 点击取消，返回false
  • 文本中的换行用/n实现

window.confirm("您确定要离开本页吗？");

1.2.3 prompt

• 显示一个可以输入文本的对话框
  • 输入文本后点击确定，返回输入的文本（字符串）
  • 点击取消，返回Null
  • 文本中的换行用/n实现

//内部可以放置两个参数，第一个为弹出框上的文本，第二个为输入框中的默认文本
window.prompt("请输入：","在此处输入文本");

1.2.4 open

• 打开一个新浏览器窗口/查找一个已命名窗口，一共可传入三个参数
  • 打开网页的URL（可以为空，显示一个空白网页）
  • 打开网页的名称（自己拟定，可方便后期继续访问）
  • 打开网页的参数（参数之间用逗号隔开）

window.open("www.imooc.com","mc","width=400px,height=400px,left=100px,top=100px");
//打开慕课网网页，命名为mc，宽高都是400px，窗口距离浏览器左上角100px

1.2.5 close

• 关闭当前浏览器窗口

1.3 定时

1.3.1 setTimeout

• 在指定的毫秒数后执行语句/函数
• 该语句仅执行一次

//建议把要执行的语句或函数单独封装
setTimeout(function(){alert("Hello");},1000);
var call = function(){alert("world");}
setTimeout(call,3000);

1.3.2 clearTimeout

• 清除超时调用
• 要用超时调用返回的id值来清除（可用一个变量承接）

//用变量time1承接超时调用的id值
var time1 = setTimeout(function(){alert("Hello");},1000);
//把承接到的id值传入clearTimeout中
clearTimeout(time1);

• 可综合使用setTimeout和clearTimeout来实现间歇调用

var i=1,max=5;//设定循环的次数
function repeatTime(){    
	document.write("hello ");
    i++;
    //当没有达到循环次数时，递归调用repeatTime函数，否则清除延时
    if(i<=max){setTimeout(repeatTime,1000);}
	else{clearTimeout(time);}
}
var time=setTimeout(repeatTime,1000);

1.3.3 setInterval

• 每隔设定的毫秒数调用一次给定的语句/函数

//每隔2000毫秒（2秒）在文档中写一个hello
setInterval(function(){document.write("hello");},2000);

1.3.4 clearInterval

• 清除间隔调用
• 需要通过间隔调用返回的id值来清除（可用一个变量来承接）

var writename = setInterval(function(){document.write("hello");},2000);
//设定执行5次之后停止调用（根据计算得出执行时间为10000毫秒）
setTimeout(function(){clearInterval(writename);},10000);

2. location对象

2.1 简介

• location对象提供和当前窗口加载文档有关信息以及导航功能
  • window对象的属性
  • document对象的属性

2.2 属性

2.2.1 href

• 返回当前加载页面的完整URL
• 该方法同window.location等价

document.write(location.href);//文档输出当前页面的完整URL
document.write(window.location);//输出结果同上面一致

2.2.2 hash

• 返回当前URL中的锚点（hash），即#以及其后的内容，如果没有返回空字符串

//通过给div一个id，让点击btn时hash值为test1，从而返回页面顶部
<div class="box1" id="test1"></div>
<div class="box2"></div>
<input type="button" value="返回顶部" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick=function(){location.hash="#test1";}
</script>

2.2.3 其他

• host：返回服务器名称和端口号（如果有）
• hostname：返回不带端口号的服务器名称（如果有）
• pathname：返回URL中目录和文件名
• port：返回URL中指定的端口号，无则返回空字符串
• protocol：返回页面使用的协议
• search：返回URL中查询字符串（该字符串以？开头）

2.3 修改位置方法

2.3.1 属性修改

• 修改location.href/hash/search的值可使页面跳转至指定的URL中
• 该方法会生成历史记录（即可以用浏览器的前进/后退按钮来调整页面）

2.3.2 replace

• 重新定向一个URL，并且不生成历史记录（即无法使用浏览器的前进/后退按钮调整页面）

location.replace("www.imooc.com");//让页面跳转到慕课网，且无法后退到上一页面

2.3.3 reload

• 重新加载页面（相当于刷新）
• 可传入参数true，从服务器重新加载页面
• 建议放在代码的最后

3. history对象

3.1 简介

• 用来保存用户在浏览器中访问页面的历史记录

3.2 方法

3.2.1 back

• 回到历史记录的上一步（回到上一个打开过的页面）

3.2.2 forward

• 前进到历史记录的下一步（到下一个打开过的页面）

3.2.3 go

• 传入参数为正：前进到历史记录的下n个页面
• 传入参数为负：后退到历史记录的前n个页面

4. screen对象

4.1 简介

• screen对象包括了有关客户端显示屏幕的信息

4.2 属性

• availWidth/availHeight：除了任务栏以外屏幕的宽度/高度

4.3 其他（window对象的属性）

• innerWidth/innerHeight：窗口文档显示区域的宽度/高度

5. navigator对象

5.1 简介

• 提供用户浏览器、浏览器版本等信息

5.2 属性

• userAgent：识别浏览器名称、版本、引擎、操作系统等信息内容，返回字符串

//浏览器类型检测
function getBrowser(){
	var explorer = navigator.userAgent.toLowerCase(),browser;
	if(explorer.indexOf("msie")>-1){browser = "IE";}
	else if(explorer.indexOf("chrome")>-1){browser = "chrome";}
	else if(explorer.indexOf("opera")>-1){browser = "opera";}
	else if(explorer.indexOf("safari")>-1){browser = "safari";}
	return browser;
}
var explorer = getBrowser();
alert("您当前使用的是"+explorer+"浏览器");