标签:使用 tab frame 角色 关系 相关 history web css
ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。BOM没有标准,各浏览器厂商间定义的公共对象,可以作为事实上的标准存在。W3C在HTML5中把BOM纳入了规范中。
window对象:表示浏览器的一个实例。window的双重角色:通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。与直接在window对象上定义属性和方法的区别在于删除操作:window对象上定义的可以delete,全局变量不可以被删除。
// 1. 全局变量为window对象的属性和方法 var age = 29; function sayAge() { console.log(this.age); } window.age; // 29 window.sayAge(); // 29 // 2. 全局变量不可删除, window对象的属性和方法可以被删除 window.color = ‘red‘; delete window.age; delete window.color; window.age; // 29, 不可删除 window.color; // undefined,可被删除 // 3. 访问全局对象未定义值会抛出异常,访问window属性不会 var newValue = oldValue; // 抛出异常 var newValue = window.oldValue; // undefined
很多全局JavaScript对象(如:location, navigator等)都是window对象的属性。
如果页面包含框架,每个框架有自己的window对象,并且保存在 frames 集合中(可以通过数值索引:0开始,从左到右,从上到下,或者框架名来访问window对象)。每个window对象都有一个name属性,用来包含框架名。使用框架的页面中,浏览器中会存在多个Global对象,每个框架内的变量是独立的,不同框架间的变量进行逻辑运算是没有意义的。框架相关对象:
<frameset rows="160,*"> <frame src=‘frame.html‘ name=‘topFrame‘> <frameset cols="50%,50%"> <frame src=‘anotherframe.htm‘ name=‘leftFrame‘> <frame src=‘yetanotherframe.htm‘ name=‘rightFrame‘> </frameset> </frameset>
+--------------------------------------------------------------+
| window.frames[0] |
| window.frames[‘topFrame‘] |
| top.Frames[0] |
| frames[0] |
| frames[‘topFrame‘] |
+--------------------------------------------------------------+
| window.frames[1] | window.frames[2] |
| window.frames[‘leftFrame‘] | window.frames[‘rightFrame‘] |
| top.frames[1] | top.frames[2] |
| top.frames[‘leftFrame‘] | top.frmaes[‘rightFrame‘] |
| frames[1] | frames[2] |
| frames[‘leftFrame‘] | frames[‘rightFrame‘] |
+--------------------------------------------------------------+
确定浏览器窗口左边、上边的位置:
var leftPos = (typeof window.screenLeft === ‘number‘)? window.screenLeft : window.screenX; var rightPos = (typeof window.screenTop === ‘number)? window.screenTop : window.screenY; // IE, Opera: screenLeft、screenTop保存的是从屏幕左边、上边到由window对象表示的页面可见区域的距离。
moveTo、moveBy方法可以移动浏览器,但是多数浏览器禁用了该功能。
IE9+、Firefox、Safari、Opera和Chrome提供4个属性来确定浏览器窗口大小:innerWidth、innerHeight、outerWidth、outerHeight。document.documentElement.clientWidth、document.documentElement.clientHeight保存了页面viewport口的信息。
var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if (typeof pageWidth !== ‘number‘) { if (document.compatMode === ‘CSS1Compat‘) { pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }
window.resizeTo(100, 100); // 调整到 100 x 100
window.resizeBy(100, 50); // 参数为新窗口与原窗口宽度、高度之差。调整到:100 x 50
window.resizeTo(300, 300); // 调整到 300 x 300
resizeTo、resizeBy方法可以调整浏览器窗口的大小,可能被浏览器禁用。
window.open(参数1, 参数2, 参数3, 参数4) 参数1:要加载的URL 参数2:窗口目标,在哪里打开窗口,窗口名:‘topFrame‘, 或特殊字符名: _self, _parent, _top 或 _blank. (都需要用引号引上!) 参数3:一个特性字符串,一个逗号分隔的设置字符串,表示新窗口中使用哪些属性,属性表如下表所示。 参数4:一个表示新页面是否取代浏览器历史中当前加载页面的布尔值
var bingWindow = window.open(‘http://cn.bing.com‘, ‘newBingWindow‘, ‘height=400,width=400,top=10,left=10,resizable=yes‘);
bingWindow.resizeTo(500, 500);
bingWindow.moveTo(100, 100);
bingWindow.close();
console.log(bingWindow.closed); // true
bingWindow.openar === window; // true
bingWindow.openar === null; // 表示:使用单独的进程运行新标签页(_blank)
参数3属性表:
设置 | 值 | 说明 |
fullscreen | yes | no | 仅限IE,是否最大化 |
height | 数值 | 新窗口的高度,最小值 100 |
left | 数值 | 新窗口的左坐标,不能为负值 |
location | yes | no | 是否显示地址栏,默认 no |
menubar | yes | no | 是否显示菜单栏,默认 no |
resizable | yes | no | 是否可被拖动改变大小,默认 no |
scrollbars | yes | no | 是否允许滚动,默认 no |
status | yes | no | 是否显示状态栏,默认 no |
toolbar | yes | no | 是否显示工具栏,默认 no |
top | 数值 | 新窗口的上坐标,不能为负值 |
width | 数值 | 新窗口的宽度,最小值 100 |
var timeoutId = setTimeout(function() {}, 1000); // 1000毫秒后执行函数 clearTimeout(timeoutId); var intervalId = setInterval(function () {}, 1000); // 每1000毫秒执行函数一次 clearInterval(intervalId);
tbd
tbd
tbd
tbd
tbd
[TimLinux] JavaScript BOM浏览器对象模型
标签:使用 tab frame 角色 关系 相关 history web css
原文地址:https://www.cnblogs.com/timlinux/p/9388820.html