JavaScript 浏览器对象模型BOM使用介绍(2)

// open()本身返回window对象
var box = open(); // 返回了一个window对象,打开了一个新空白页面;
box.alert(''); // 然后指定在open()返回的对象打开的新页面弹窗;

// 字窗口操作父窗口
document.onclick = function(){         // 在新的窗口中点击docuement对象;
opener.document.write('子窗口让我输出的!');// 此时在产生它的父窗口会生成文字内容;
}

4.窗口的位置和大小

(1).窗口的位置 // 用来确定和修改window对象(浏览器窗口)相对于屏幕的位置: // IE+Safari+Opera+Chrome都提供了screenLeft和screenTop属性, // Firefox提供了screenX和screeY属性; // 他们分别表示窗口看相对于屏幕左边和上边的位置; // 确定窗口的位置=>IE alert(screenLeft); // 浏览器左侧离屏幕的距离; // 确定窗口的位置=>Firefox alert(screenX); // 浏览器左侧离屏幕的距离; // 跨浏览器的方法 var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX; // 判断检测的screenLeft是否是数值,若是则使用screenLeft的值,否则使用screenX的值;

(2).窗口的大小 // 检测浏览器窗口本身及边框的尺寸:outerWidth和outerHeight; alert(outerWidth); alert(outerHeight); // 检测页面大小属性:innerWidth和innerHeight; alert(innerWidth); alert(innerHeight); // PS:IE没有提供当前浏览器窗口尺寸的属性; 在DOM中有提供相关的方法; // 在IE及其他浏览器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;来保存页面窗口的信息; // PS:在IE6中,上述属性在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight; // 如果是Firefox等浏览器,直接使用innerWidth和innerHeight; var width = window.innerWidth; // 这里要加window,因为IE会无效; var height = window.innerHeight; if(typeof width != 'number'){ // IE6浏览器 if(document.compatMode == 'CSS1Compat'){ // 判断是IE6标准模式;使用documentElement; width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; }else{ // 否则是IE6非标准模式;使用body; width = document.body.clientWidth; height = document.body.clientHeight; } } // PS:以上方法可以通过不同浏览器取得各自的浏览器窗口可视部分的大小; // document.compatMode可以确定页面是否处于标准模式;

// 调整浏览器位置; moveTo(0,0); // 移动到(0,0)坐标;IE有效; moveBy(10,10); // 向下和向右分别移动10px;IE有效; // 调整浏览器大小 resizeTo(200,200); // 调整大小; resizeBy(200,200); // 扩展收缩大小;

5.间歇调用和超时调用
1 // JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行;
2 // 超时值:在指定的时间过后执行代码;
3 // 间隔值:每隔指定的时间就执行一次代码;

// 超时调用使用window对象的setTimeout()方法; // 它接受两个参数:要执行的代码和毫秒数; setTimeout(function(){ // 直接使用函数传入的方法,扩展性好,性能更加; alert('警告!'); },1000); // 调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用; // 这个超时调用的ID是计划执行代码的唯一标识符,可以通过它来取消超时调用; // 要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它; var box = setTimeout(function(){ // 将超时调用的ID赋值给变量box; alert('超时调用'); },1000); clearTimeout(box); // 将ID传入取消调用方法;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgjxzj.html