公告

JavaScript中的BOM对象

Posted on 2021-03-12 12:57 萌栈师阅读(337) 评论(0) 收藏举报

BOM对象

1.BOM：Browser Object Model 浏览器对象模型

2.了解BOM后，我们可以通过JS来操作浏览器

1.特点

不存在BOM 的官方标准；
现在的浏览器几乎都实现了javascript交互相同的方法和属性；
BOM也可以称为宿主对象（和对应的浏览器相关）。

JS语法不区分浏览器，与浏览器无关，但是BOM、DOM是与浏览器相关的，浏览器不同，DOM的某些属性是不同的。

2.BOM和DOM关系

BOM是包含DOM对象（文档对象模型）；

BOM中包含的对象：Document、frames[]、History、Location、Navigator、Screen...

其中Document对象是DOM中的重要的组成部分。

3.BOM中的对象

3.1 window

BOM的核心对象是window，它表示浏览器的一个实例。

window对象既是js访问浏览器窗口的一个接口，又是ECMAScript规定的global对象。

3.1.1 window作为全局作用域

var name = "明明";
function showName(){
    alert(this.name);
}
console.log(window.name);
showName();
window.showName();
//age和showName都是全局变量和函数，所以都是属于window的了

调用全局函数和属性时，window可以省略不写。

3.1.2 窗口属性和方法

窗口尺寸：针对不同浏览器，设置窗口高度和宽度的属性都不同，如下：

//window.innerHeight - 浏览器窗口的内高度（以像素计）
//window.innerWidth - 浏览器窗口的内宽度（以像素计）
//浏览器窗口（浏览器视口）不包括工具栏和滚动条。
//对于 IE 5,6,7,8: 
//document.documentElement.clientHeight
//document.documentElement.clientWidth 或
//document.body.clientHeight
//document.body.clientWidth		 
<script>
    var w = window.innerWidth
			||document.documentElement.clientWidth
  			||document.body.clientWidth;
	var h = window.innerHeight
			||document.documentElement.clientHeight
			||document.body.clientHeight;
</script>

窗口打开和关闭

1.open()方法：window.open(URL);

两种时间处理方式：

方式一：在元素中添加点击事件onclick

方式二：用按钮的点击属性

** 注意：将script放在head中时，文档加载从上往下依次加载，所以，方式二直接获取不到按钮对象

解决方式：将方式二放在window.onload = function(){}中，表示等待页面元素加载完成再加载该方法。

<script>
    //方式一：
    var win1 = null;
    function showOpen(){
    	win1 = window.open("https://www.baidu.com");//window可以省略
	}
	//方式二：
	var btn = document.getElementById("open2");
	var win2 = null;
	btn.onclick = function(){
    	//如果浏览器阻止弹出窗口，window.open会抛出一个异常
    	var blocked = false;
   		try{
        	win2 = window.open("https://www.baidu.com","_blank");//在空白页打开
        	if(win2==null){
            	blocked = true;    
        	}
    	}catch(ex){
        	blocked = true;
    	}
    	if(blocked){
        	alert("弹出的窗口被阻止");
    	}
	}
</script>
<input type="button" value="open1" onclick="showOpen()">
<input type="button" id="open2" value="open2">

close()方法：openWindow.close()

close()只能关闭自己打开的窗口，所有对象要为global对象，方便调用

//方式一关闭：
<input type="button" value="close1" onclick="closeWindow()">
function closeWindow(){
    win1.close();
}
//方式二关闭：
<input type="button" id="close2" value="close2">
var closeBtn = document.getElementById("close2");
closeBtn.onclick = function(){
    win2.close();
}

opener属性：通过open()新创建的window对象有一个opener属性，保存着打开它的原始窗口对象

可以通过打开的窗口对象查看。win1.opener();-->window.opener.location.href

3.1.3 间歇调用和超时调用

JavaScript是单线程语言，但是它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。

间歇调用-setInterval

setInterval(function,mills)

第一个参数：传入方法

第二个参数：每隔多少毫秒执行一次方法
取消或停止间歇调用-clearInterval(interval对象)

var count = 0;
var inter = setInterval(function(){
    console.log("hello");
    count++;
    if(count>5){
        clearInterval(inter);//停止打印
    }
},1000)

超时调用-setTimeOut

setTimeOut(function,mills)

第一个参数：传入方法

第二个参数：指定多少毫秒以后执行代码
取消或停止超时调用-clearTimeOut(timeOut对象)：需要在超时调用的时间未到时调用。

var timeout = setTimeout(function(){
    console.log("hello");
},3000)
function stop(){
    clearTimeout(timeout);
}
<input type="button" value="停止" onclick="stop();">

3.1.4 系统对话框

1. window.alert()

该方法会弹出一个带有一条指定消息和一个“确定”按钮的警告框。

2. window.confirm()

该方法会弹出带有一段消息以及确认/取消的对话框

如果确定--->返回true

如果取消--->返回false

var value = confirm("是否删除？")
console.log(value);//-->true/false

3. window.prompt()

该方法用于显示提示用户进行输入的对话框

如果取消--->返回null

如果确定--->返回当前输入的文本

var value = prompt("请输入姓名：")
console.log(value);

没输入，直接确定--->返回“ ”;

输入了，确定--->返回输入的文本;

点击取消，返回null.

3.2 location

3.2.1 作用

提供了与当前窗口中加载的文档有关信息
提供导航的功能
window.location相当于document.location

3.2.2 属性

URI：Universal Resource Identifier 统一资源标志符，用来标识抽象或物理资源的一个紧凑字符串。(相当于通过身份证号码找人)
URL：Universal Resource Locator 统一资源定位符，一种定位资源的主要访问机制的字符串。(相当于通过住址找人：江苏省/南京市/xx区/xx路/xx号/找某某人)
URN：Universal Resource Name 统一资源名称，通过特定命名空间中的唯一名称或ID来标识资源。(暂时很少使用)

其中，三者关系：URI包括URL和URN，URL和URN相交。

属性：

另：

href：设置或返回完整的URL;

host：设置或返回主机名和当前URL的端口号。

** 以上属性都可以设置或返回值。

location.href = "http://www.baidu.com";//--->设置当前的URL，网页会直接跳转
//等价于
window.location = "http://www.baidu.com";

3.2.3 方法

reload():重新加载

location.reload();//重新加载（可能从缓存中加载）
location.reload(true);//重新加载（从服务器重新加载）

3.3 navigator

3.3.1 检测插件

网页中的插件在navigator.plugins[] 数组中，可以以用于检测网页插件

functionhasPlugin(name){
    name = name.toLowerCase();
    for(vari=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name)>1){
            return true;        
        }    
    }
    return false;
}//检测插件
console.log(hasPlugin("Flash"));
console.log(hasPlugin("QuickTime"));

3.3.2 用户代理检测

用户代理检测，通过检测用户代理字符串来确定实际使用的浏览器。

//检测浏览器类型
console.log(navigator.userAgent);
//做图片预览时可用（不同浏览器获取路径的方式不同）
function getFullPath(obj){   
    if (obj){
        //ie
        if (window.navigator.userAgent.indexOf("MSIE") >=1){
            obj.select();   
            return document.selection.createRange().text;           
        }else if (window.navigator.userAgent.indexOf("Firefox") >=1){ 
            //firefox 
            return window.URL.createObjectURL(obj.files.item(0));        
        }else if(navigator.userAgent.indexOf("Chrome")>0){
            //chrome
            return window.URL.createObjectURL(obj.files.item(0));        
        }   
        return obj.value;               
    }        
} 
function changeImg(file){
    var img = document.getElementById("img");
    img.src = getFullPath(file);//-->获取的文件路径是经过加密的，为了保护用户的信息安全 
}
<body>
    <input type="file" onchange="changeImg(this);"/>
    <img id="img"/>
</body>

** 无法获取用户文件的绝对路径，当获取图片时，打印其路径：C:\fakepath\xxx.jpg(不是真实的路径，为了用户信息安全)，需要用以上的getFullPath(file)的方式预览图片。

3.4 history

history对象保存着用户上网的历史记录，从窗口被打开时算起。history是window对象的属性。为了安全，开发人员无法知道用户浏览过的URL，可以借由用户访问过的页面列表，在不知道URL的情况下实现前进和后退。

history.back();//加载history列表中的前一个url  相当于--->go(-1)
history.forward();//加载history列表中的下一个url  相当于--->go(1)
history.go();//加载history列表中的某个具体url

3.5 screen

在编程中用户不大，略

刷新页面返回顶部