JavaScript--BOM
BOM（browser object model）浏览器对象模型
一、window对象
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
1.window对象的方法
①alert("content")
语法：window.alert（”content”）
功能：显示带有一段消息和一个确认按钮的警告框
②confirm(“message")
语法：window.confirm(“message")
功能：显示一个带有指定消息和OK及取消按钮的对话框
返回值：如果用户点击确定按钮，则confirm（）返回true
如果用户点击取消按钮，则confirm（）返回false
③prompt(“text,defaultText")
语法：window.prompt(“text,defaultText")
参数说明：
text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
返回值：如果用户单击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
注意:所有的全局变量和全局方法都被归在window上
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" value="删除" id="btn">
</div>
<script>
var age=15;
function sayAge(){
alert('我'+window.age);
}
// 声明一个全局变量
window.username="marry"; // var username="marry";
// 声明一个全局方法
window.sayName=function(){
alert("我是"+this.username);
}
//sayAge();
//window.sayName();
// confirm()
// 获取按钮,绑定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
// 弹出确认对话框
var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
if(result){
document.getElementById("box").style.display="none";
}
}
// 弹出输入框
//var message=prompt("请输入您的星座","天蝎座");
//console.log(message);
</script>
</body>
全局变量.jpg
全局函数.jpg
④open(pageURL,name,parameters)
语法：window.open(pageURL,name,parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL：子窗口路径
name：子窗口句柄。（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters ：窗口参数(各参数用逗号分隔)
⑤close( )
语法：window.close( )
功能：关闭浏览器窗口
index1.html:
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打开子窗口，显示newwindow.html
window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
//name的作用：在引用子窗口的时候通过name引用
var quit = document.getElementById("quit");
// 点击关闭当前窗口
quit.onclick = function(){
window.close();
}
}
</script>
</body>
newwindow.html：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>hello window.open</h1>
</body>
</html>
设置窗口属性.jpg
⑥定时器
JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序。
超时调用：
语法：setTimeout（code,millisec）
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：
1、code：要调用的函数或要执行的JavaScript代码串
2、millisec：在执行代码前需等待的毫秒数
说明：setTimeout（）只执行code一次。如果要多次调用，请使用setInterval（）或者让code自身再次调用setTimeout（）
setTimeout方法返回一个ID值，通过它取消超时调用
清除超时调用:
语法：clearTimeout（id_of_settimeout）
功能：取消由setTimeout（）方法设置的timeout
参数说明：
1、 id_of_settimeout ：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块
<body>
<script>
//setTimeout("alert('hello')",4000);
//匿名函数
var timeout1=setTimeout(function(){
alert("hello");
},2000)
//自定义函数
var fnCall=function(){
alert("world");
}
clearTimeout(timeout1);
//推荐：
//setTimeout(fnCall,5000);
</script>
</body>
间歇调用：
语法：setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：
1、code：要调用的函数或要执行的代码串。
2、millisec：周期性执行或调用code之间的时间间隔，以毫秒计
<body>
<script>
/* var intervalId=setInterval(function(){
console.log("您好");
},1000)
// 10秒之后停止打印
setTimeout(function(){
clearInterval(intervalId);
},10000);*/
var num=1,
max=10,
timer=null;
// 每隔1秒针num递增一次，直到num的值等于max，清除定时器
/* timer=setInterval(function(){
console.log(num);
num++;
if(num>max){
clearInterval(timer);
}
},1000)*/
// 使用超时调用实现
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
</script>
</body>
二、location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
1.location对象的常用属性
①location.href
语法：location.href
功能：返回当前加载页面的完整URL
说明： location.href与window.location.href等价
②语法：location.hash
功能：返回URL中的hash（#号后 跟零或多个字符），如果不包含
则返回空字符串。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{height:400px;background:#ccc;}
.box2{height:600px;background:#666;}
</style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回顶部">
<script>
//console.log(location.href);
//file:///E:/BaiduNetdiskDownload/JavaScript/js%E8%B5%84%E6%96%99%E5%92%8C%E6…E5%9F%BA%E7%A1%80%EF%BC%88%E6%BA%90%E4%BB%A3%E7%A0%81%EF%BC%89/index6.html
//console.log(location.hash);
//在连接中加入锚点 打印锚点#top
var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
}
console.log(location.pathname);
</script>
</body>
③location.host
语法：location.host
功能：返回服务器名称和端口号（如果有）
④location.hostname
语法：location.hostname
功能：返回不带端口号的服务器名称。
⑤location.pathname
语法：location.pathname
功能：返回URL中的目录和（或）文件名。
⑥location.port
语法：location.port
功能：返回URL中指定的端口号，如果没有，返回空字符串。
⑦location.protocol
语法：location.protocol
功能：返回页面使用的协议。
⑧location.search
语法：location.search
功能：返回URL的查询字符串。这个字符串以问号开头。
xxxx?id=55&name=marry;
location.search;
"?id=55&name=marry;"
2.locating对象的位置操作
改变浏览器位置的方法：
location.href属性
location对象其他属性也可改变URL：
location.hash
location.search
①location.replace()
语法：location.replace(url)
功能：重新定向URL。
说明： 使用location.replace不会在历史记录中生成新纪录。
②location.reload()
语法：location.reload()
功能：重新加载当前显示的页面。
说明：
• location.reload()有可能从缓存中加载
• location.reload(true)从服务器重新加载
<body>
<input type="button" value="刷新" id="reload">
<script>
/* setTimeout(function(){
//location.href='index6.html';
// window.location='index6.html';
location.replace("index6.html");
},1000)*/
document.getElementById("reload").onclick=function(){
location.reload(true);
}
</script>
</body>
三、history对象
history对象保存了用户在浏览器中访问页面的历史记录
①history.back()
语法：history.back()
功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)
②history.forward()
语法：location.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)
③history.go(-n)
语法：history.go(-n)
功能：回到历史记录的前n步
④history.go(n)
语法：history.go(n)
功能：回到历史记录的后n步
<body>
<p>这是index11.html</p>
<p><input type="button" value="后退" id="btn"></p>
<p><input type="button" value="前进" id="btn2"></p>
<p><input type="button" value="前进两步" id="btn3"></p>
<script>
var btn=document.getElementById("btn");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
//点击btn按钮时回到历史记录的上一步
btn.onclick=function(){
//history.back();
//history.go(-1);
history.go(-2);//回到前两步
}
//点击btn2按钮来到历史记录的下一步
btn2.onclick=function(){
//history.forward();
history.go(1);
}
//点击btn3按钮来到历史记录的下一步
btn3.onclick=function(){
history.go(2);
}
</script>
</body>
四、Screen对象
包含有关客户端显示屏幕的信息
①screen.availWidth
语法：screen.availWidth
功能：返回可用的屏幕宽度
②screen.availHeight
语法：screen.availHeight
功能：返回可用的屏幕高度
<body>
<script>
//获取屏幕的宽和高
console.log("页面宽："+screen.availWidth);
console.log("页面高："+screen.availHeight);
//获取窗口的宽和高
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);
</script>
</body>
五、Navigator对象
UserAgent：用来识别浏览器名称、版本、引擎 以及操作系统等信息的内容。
可以判断浏览器的类型
判断设备的终端是移动还是PC
<head>
<meta charset="UTF-8">
<title>Navigator</title>
</head>
<body>
<script>
//console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){
var explorer = navigator.userAgent,browser;
//indexOf():返回某个指定的字符串值在字符串中首次出现的位置，如果没有出现过，返回-1
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 browser = getBrowser();
console.log("您当前使用的浏览器是："+browser);
// 判断终端
function isPc(){
var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo);
for(i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false;
break;
}
}
return flag;
}
var isPcs = isPc();
console.log(isPcs);
</script>
</body>
网友评论