JavaScript BOM

1 、概述
BOM（browser object model）浏览器对象模型，可以实现JavaScript与浏览器之间的交互。BOM提供了以

下几种对象：
window对象
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览
器窗口的一个接口，
又是ECMAScript规定的Global对象。
location对象
location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。location对象提供了与当
前窗口中加载的文档有关
信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
history对象
history 对象包含浏览器的历史。
screen对象
screen 对象包含有关用户屏幕的信息。
navigator对象
navigator 对象包含有关访问者浏览器的信息。
2 、常用对象方法
window.alert 显示带有一段消息和一个确认按钮的警告框
window.promt 如果用户单击提示框的取消按钮，则返回null，如果用户单击确认按钮，则返回输入字段当前
显示的文本
window.conﬁrm 显示一个带有指定消息和OK及取消按钮的对话框（布尔值）
window.open() 打开新窗口
window.close() 关闭当前窗口
window.moveTo() 移动当前窗口
window.resizeTo() 调整当前窗口的尺寸
setTimeout 在指定的毫秒数后调用函数或计算表达式
clearTimeout 取消由setTimeout（）方法设置的timeout
setInterval 每隔指定的时间执行一次代码
location.href 返回当前加载页面的完整URL
location.hash 返回URL中的hash（#号后跟零或多个字符），如果则返回空字符串
location.replace 重定向URL地址，使用location.replace不会在历史记录中生成新纪录（无返回按钮）
location.host 返回服务器名称和端口号（如果有）
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
history.back() 与在浏览器点击后退按钮相同
history.forward() 与在浏览器中点击按钮向前相同
history.go(n)回到历史的第n步
navigator.userAgent 获取浏览器型号信息
3 、举例
window.alert
window.promt
window.conﬁrm
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title> 输入框</title>
6 </head>
7 <body>
8 <input id="btn" type="button" value=" 点击">
9 <script type="text/javascript">
10 var btn=document.getElementById("btn");
11 btn.onclick=function(){
12 var result=window.confirm(" 确定要删除吗？");
13 if(result){
14 btn.style.color="red";
15 }
16 }
17 </script>
18 </body>
19 </html>
、window.close
window.open
打开、关闭窗口
1 <!doctype html>
2 <html lang="en">
3 <head>
5 <title>open</title>
6 </head>
7 <body>
8 <input type="button" value=" 退出" id="quit">
9 <script>
10 window.onload = function(){
11 // 打开子窗口，显示newwindow.html
12
window.open("newwindow.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=n
o,scrollbars=no,
13 location=no,status=no");
14 var quit = document.getElementById("quit");
15 // 点击关闭当前窗口
16 quit.onclick = function(){
17 window.close();
18 }
19 }
20 </script>
21 </body>
22 </html>
、clearTimeout定时器
setTimeout
延迟多少时间执行代码
1 <!doctype html>
2 <html lang="en">
3 <head>
5 <title>Document</title>
6 </head>
7 <body>
8 <script>
9 //setTimeout("alert('hello')",4000);
10 var fnCall=function(){
11 alert("world");
12 }
13 var timeout1=setTimeout(function(){
14 alert("hello");
15 },2000)
16 clearTimeout(timeout1);
17 //setTimeout(fnCall,5000);
18 </script>
19 </body>
20 </html>
、clearInterval定时器
setInterval
周期性执行代码
location方法
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
5 <title>location方法</title>
6 </head>
7 <body>
8 <input type="button" value=" 操作页面" id="ck">
10 var btn=document.getElementById("ck")
11 btn.onclick=function(){
12 var result=window.confirm(" 刷新页面么？")
13 if(result){
14 location.reload(true);
15 }else
16 location.replace("http://www.imooc.com")
17 }
18 </script>
19 </body>
20 </html>
对象
screen
屏幕的宽和高、窗口的宽和高
1 <!doctype html>
2 <html lang="en">
3 <head>
5 <title>screen</title>
6 </head>
7 <body>
8 <script>
9 console.log(" 页面宽："+screen.availWidth);
10 console.log(" 页面高："+screen.availHeight);
11 console.log("pageWidth:"+window.innerWidth);
12 console.log("pageHeight:"+window.innerHeight);
13 </script>
14 </body>
15 </html>
navigator 对象
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> 菜鸟教程(runoob.com)</title>
6 </head>
7 <body>
8
9 <div id="example"></div>
10 <script>
11 txt = "<p> 浏览器代号: " + navigator.appCodeName + "</p>";
12 txt+= "<p> 浏览器名称: " + navigator.appName + "</p>";
13 txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
14 txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
15 txt+= "<p>硬件平台: " + navigator.platform + "</p>";
16 txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
17 txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
18 document.getElementById("example").innerHTML=txt;
19 </script>
20 </body>
21 </html>
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
5 <title>userAgent</title>
6 </head>
7 <body>
8 <input type="button" value=" 点击获取浏览器信息" id="browser">
10 var bro=document.getElementById("browser");
11 bro.onclick=getBrowser;
12 function getBrowser(){
13 var explorer = navigator.userAgent,browser;
14 if(explorer.indexOf("MSIE")>-1){
15 browser = "IE";
16 }else if(explorer.indexOf("Chrome")>-1){
17 browser = "Chrome";
18 }else if(explorer.indexOf("Opera")>-1){
19 browser = "Opera";
20 }else if(explorer.indexOf("Safari")>-1){
21 browser = "Safari";
22 }
23 document.write(" 您使用的浏览器是"+browser+"浏览器");
24 }
25 </script>
26 </body>
27 </html>
1 <!doctype html>
2 <html lang="en">
3 <head>
5 <title>Navigator</title>
6 </head>
7 <body>
8 <script>
9 //console.log(navigator.userAgent);
10 // 判断浏览器
11 function getBrowser(){
12 var explorer = navigator.userAgent,browser;
13 if(explorer.indexOf("MSIE")>-1){
14 browser = "IE";
15 }else if(explorer.indexOf("Chrome")>-1){
16 browser = "Chrome";
17 }else if(explorer.indexOf("Opera")>-1){
18 browser = "Opera";
19 }else if(explorer.indexOf("Safari")>-1){
20 browser = "Safari";
21 }
22 return browser;
23 }
24 var browser = getBrowser();
25 console.log("您当前使用的浏览器是："+browser);
26 // 判断终端
27 function isPc(){
28 var userAgentInfo = navigator.userAgent,
29 Agents = ["Andriod","iPhone","symbianOS","windows
phone","iPad","iPod"],
30 flag = true,i;
31 console.log(userAgentInfo);
32 for(i=0;i<Agents.length;i++){
33 if(userAgentInfo.indexOf(Agents[i])>-1){
34 flag = false;
35 break;
36 }
37 }
38 return flag;
39 }
40 var isPcs = isPc();
41 console.log(isPcs);
42 </script>
43 </body>
44 </html>

JavaScript BOM

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript BOM

Uploaded by

Copyright:

Available Formats

1 、概述

BOM（browser object model）浏览器对象模型，可以实现JavaScript与浏览器之间的交互。BOM提供了以

You might also like