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/i("您确定要离开本页吗？");

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，从而返回页面顶部





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+"浏览器");

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

JavaScript相关栏目本月热门文章