您的位置: 首页  >  文章  >  BOM

BOM

分类: 文章 • 2022-10-15 14:35:14

第八章 BOM

简介

BOM(Browser Object Model)浏览器对象模型
1、【打开新窗口/打开标签页/关闭页等都通过BOM来控制】
2、【没有标准，不同浏览器实现同一功能需要不同的实现方式】

//下面是不同浏览器加入收藏夹代码
window.external.Addavoorite(url,title);    //IE浏览器
window.sidebar.addpanel(tltle,url,"");    //FireFox浏览器

8.1 window对象

BOM的核心对象是window

8.1.1全局作用域

所有全局作用域中声明的变量、函数都会是window对象的属性和方法

var newvalue = oldvalue; //此时如果oldvalue未定义的时候会报错
var newvalue = window.oldvalue; //不会报错
*因为window.oldvalue相当于一次属性查询*

与var定义的全局变量的区别

var age = 29；   //有一个名为configurable = false的特性 不可以用delete删除
window.color = "red";
delete window.age；  //所有浏览器返回false
delete window.color; // IE9以上都正确

8.1.2 窗口关系及框架

窗口框架：包括 框架集（frameset） 与 框架页(frame)
框架集----用于划分窗口 属性有：

  • cols ：划分为左右框架
  • rows : 划分为上下框架
  • farmeborde : 取值1/0 是否有框架边框
  • border : 边框的粗细
  • bordercolor : 边框的颜色

框架页 //显示框架集里面的网页地址 属性有：

  • src : 网页地址
  • noresize : 不能调整窗口大小
  • scrolling : 是否有滚动条
  • name ：框架页名字，< a >标签的target属性可使用
    BOM
    top始终指向最外层的框架，也就是浏览器窗口，于是一个窗口可以有下图的多种方式去访问
    还有parent对象指向父框架集，就是一个框架页的HTML文件里有别的框架集
    还有一个self对象，始终指向window,与parent对象对应
    BOM

8.1.3窗口位置

获取窗口对屏幕左边和上边的位置：
IE/Safair/Opera/Chrome支持 screenLeft / screenTop
Firefox支持 screenX / screenY
一下代码获元素到浏览器窗口（电脑屏幕的左边和顶部【包括浏览器工具栏的像素高度】）

var leftpos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var toppos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

8.1.4窗口大小

IE9+/firefox/safari/opera/chrome 提供四个属性
outerHeight ：整个浏览器的高度（包括工具栏和网址）
outerWidth ：整个浏览器的宽度（包括右边的滚动条）
innerHeight : 除去工具栏的浏览器高度（包含下方的滚动条）
innerWidth ：浏览器的宽度（不包含右边的滚动条）
document.documentElement.clientHeight : 页面展示出来的高度，不包含下方滚动条
document.documentElement.offsetHeight : body的总高度/整个页面的高度
BOM
浏览器与页面宽度这一部分自己也还很不清楚

调整浏览器窗口的大小 opera 和 IE7是禁用的，只适用于window不适用于框架
resizeTo() : 浏览器窗口的新宽度和新高度
resizeBy() : 新窗口与原来窗口的宽度和高度差

8.1.5导航和打开窗口

window.open(); 可以导航到特定的URL也可以打开新窗口；
【1】：传递一个参数，在一个新的窗口打开window.open("http://baidu.com");
【2】：传两个参数表示已经有窗口或者框架的名字、或者如下
这个参数与《a》标签的target属性类似 标签的target属性
_self【当前窗口】
_parent【夫框架集】
_top【整个窗口】
_blank【新窗口】
【3】含有第三个参数，第三个参数是逗号分隔的字符，表示在新窗口的特性

window.open("http://www.baidu.com","_self","height=400,top=10");

上面的代码可以解决浏览器不支持resizeTo()和resizeBy() 重新定位窗口位置的方法
BOM
注意 wroxwin.close() 关闭新窗口的方法仅适用于window.open()打开的窗口
新创建的window对象有一个opener属性，保存了打开这个它的原始窗口对象
如果在新窗口设置 worxwin.opener == null；这个标签页与它的原始窗口就失去了联系

安全限制

大部分的浏览器都有弹出窗口过滤系统。通常open()方法只有在用户点击链接之后才会被调用。以下代码就代表如果在浏览器初始化之后就使用open去打开新的窗口，就会返回undefined失败。

<script>
	var w = window.open();
	console.log(w); //undefined
</script>

弹出窗口屏蔽程序

这个程序是大多数浏览器内置的程序，如果被屏蔽那么window.open()会返回null值。
【1】可以利用window.open()的返回值操作新窗口的开闭。如果当前的值为null，意味着窗口没有打开直接打开如果当前值不为null,意味着新窗口已经打开，执行函数close()方法将其关闭。（以上效果可以在原始网页里面的按扭去控制新窗口的打开与关闭）
【2】通过try…catch…可以检测是否被屏蔽

var blocked = false; 
try{
	var wroxwin = window.open("http://www.baidu.com","_blank");
	if(worxwin == null){
		blocked = true;
	}
}catch(ex){
	blocked = true;
}
if(blocked){
	alert("已被屏蔽！")
}

8.1.6间歇时间调用和超时调用

setTimeout() 超时调用
只执行一次，自动关闭
超时调用的代码都是在全局作用域种执行的

var timeoutid = setTimeout(function(){
	alert("hello world!");
},1000)
// 调用setTimeout() 之后，返回一个ID值

setInterval() 间歇调用
执行无数次，需要手动关闭
关闭时要将间歇调用clearInterval(ID值)关闭间歇调用;
超时调用可以通过递归实现间歇调用的功能，但是由于递归，要注意内存泄漏的问题

var i = 1;
function alertNumber() {
    if(i <= 5) {
        alert(i++);
        setTimeout(alertNumber, 100);
    } 
}
setTimeout(alertNumber, 100);

BOM
BOM

系统对话框

alert() 警告框
conim() 对话框
BOM

if(confirm("Are you sure?")){
	alert("OK！")；
}else{
	alert("cancel！")；
}
//即可以使用(confirm("Are you sure?"))来确定用户的选择

prompt() “提示框”用户可以输入信息
BOM

var result = prompt("what is you name?","")；
if(result !== null){
	alert("resullt");
}
prompt("what is you name?","这个是输入框的默认值")；

还有两个 window.print() \window.find() 方法 异步方法
以上前三个是是Javascript停止猴弹出的提醒框，后两个异步不会暂停js代码的执行

8.2 location对象

提供当前窗口中加载的文档有关信息，还提供导航功能。
window.location与document.location引用的是同一个对象
下图是location的属性
BOM

8.2.1查询字符串参数

字符串参数类似于URL上面的？后面需要查找的东西
格式：“？q=JavaScript”；
通过一个函数解析查询的字符串

function getQueryStringArgs(){
	//取得查询字符串并去掉开头的问好
	var qs = (location.search.length > 0 ? location.search.substring(1) : “”)；
	//保存数据的对象
	args = {};  
	//取得每一项
	items = qs.length ? qs.split("&") : [];
	item = null;   //下面这几个是args对象的属性
	name = null;
	value = null;
	i = 0；
	len = items.length;
	//将每一项放在args对象中
	for(i=0;i<len;i++){
		item = items[i].split("=");
		name = decodeURIComponent(item[0]); // decodeURIComponent()是对url进行解码的方法
		value = decodeURIComponent(item[1]);
		if(name.length){
			args[name] = value;
		}
	}
	return args;
}

8.2.2位置操作

location.assign() ：在本页面中打开一个新的url页面，在浏览记录上添加一个记录，即在浏览器的返回按钮可以返回原来的url页面
location,replace()：如果不希望用户点返回按钮返回到原理来的URL页面，使用这个方法按钮将不能使用

window.location = "http://www.wrox,com";
location.href = "http://www.wrox.com";
//以上两行代码与assign()方法一样。

8.3 navigator对象

识别浏览器的事实标准
navigation对象的属性通常用于检测显示网页的浏览器类型

8.3.1 检测插件

  • 对于非IE浏览器 可以使用 plugins数组
    name：插件的名字
    description：插件的描述
    dilename：插件的文件名
    length：插件所处理的MIME类型数量（MIME是不同文件类型的后缀（扩展名比如.txt））
//非IE浏览器
function hasPlugin(name){
	name = name.toLowerCase();   //将要检测的插件名字转换为小写，避免出现错误
	for(var i=0;i < navigator.plugins.length;i++){
	//检测的插件名字是否在已安装插件的数组里，有的话indexOf是插件的索引
		if(navigator.plugins[i].name.toLowerCase().indexOf(name) > 1){ 
				return true;
		}
	}
	return false；
}
alert(hasPlugin("Flash"));//检测是否有安装flash插件
  • 针对IE浏览器的P212页

8.5 history对象

从窗口打开的一刻起，history是window对象的属性，每一个浏览器窗口每个标签页面甚至每一个框架都有自己的history对象。
go() 可以实现用户在自己的历史纪录中跳转
history.go(-1) ：后退一页
history.go(1)：前进一页
history.go(“worx.con”)：此时跳转到浏览过的包含该字符串的第一个位置，如果不包含则什么都不做
back()、forward()可以代替go()
history的length属性 保存着历史纪录的数量
标签页第一个页面length值为0；

相关推荐