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+"浏览器");
随时随地看视频
