BOM之window对象

双重角色　　

　　BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过Javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象。

全局作用域

【1】在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var age = 29;
function sayAge(){
    console.log(this.age);
}
console.log(window.age);//29
sayAge();//29
window.sayAge();//29

【2】全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以

　　[注意1]严格模式下，只有通过window.XX来定义XX属性，并且通过delete window.XX删除属性才不会报错。
　　[注意2]IE8-浏览器遇到使用delete删除window属性的语句，或者删除的是window的属性，都会抛错

"use strict"
var age = 29;
window.color = "red";
delete window.age;//IE8-抛错,在严格模式下也抛错
console.log(window.age);//29
console.log(age);//29
"use strict"
var age = 29;
window.color = "red";
delete age;//在严格模式下不允许对表达式调用delete出错
console.log(window.age);//29
console.log(age);//29
"use strict"
var age = 29;
window.color = "red";
delete color;//IE8-抛错，在严格模式下不允许对表达式调用delete出错
console.log(window.color);//undefined
console.log(color);//is not defined
"use strict"
var age = 29;
window.color = "red";
delete window.color;//IE8-抛错
console.log(window.color);//undefined
console.log(color);//is not defined

【3】尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在

//抛出错误，因为oldValue未定义
var newValue = oldValue;
//不会抛出错误，因为这是一次属性查询
var newValue = window.oldValue;

窗口位置

【1】获取

　　IE、safari、Opera、chrome都支持screenLeft和sreenTop
　　firefox支持screenX和screenY

　　兼容写法如下:

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
console.log(leftPos,topPos);
//最大化情况下，chrome:0 0 || IE: 0 68 || safari: -9 -9 || firefox: -7 -7
//由于各浏览器的实现不同，无法在跨浏览器条件下取得精确坐标值

【2】移动

　　使用moveTo()和moveBy()方法将窗口精确移动到一个新位置。
　　[支持程度]只有IE和safari支持,且实现效果不同
　　　　[a]moveTo()接收两个参数，分别是新位置的x和y坐标值

//将窗口移动到屏幕左上角
document.onclick = function(){
    window.moveTo(0,0);
}

　　　　[b]moveBy()接收两个参数，分别是水平和垂直方向上移动像素数

//将窗口向下移动100像素
document.onclick = function(){
    window.moveBy(0,100);
}

窗口大小

【1】获取

　　【innerHeight和innerWidth】(窗口中页面视图区的大小（减去边框宽度）)(IE9+)
　　　　innerHeight = document.documentElement.clientHeight
　　　　innerWidth = document.documentElement.clientWidth
　　【outerHeight和outerWidth】(浏览器窗口本身大小)(IE9+)
　　【DOM:document.documentElement.clientWidth和document.documentElement.clientHeight】(页面视口信息)(全兼容)
　　　　页面大小兼容写法:

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;

【2】调整

　　【resizeTo()和resizeBy()】(只有IE和safari支持)

　　　　[a]resizeTo()接收两个参数:浏览器窗口的新宽度和新高度

document.onclick = function(){
    //将浏览器窗口调整到100,100
    window.resizeTo(100,100);
}

　　　　[b]resizeBy()接收两个参数:浏览器新窗口与原窗口的宽度和高度之差

document.onclick = function(){
    //将浏览器窗口宽度增加100
    window.resizeBy(100,0);
}

打开窗口

　　使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

　　【1】通常只需传递第一个参数，最后一个参数只在不打开新窗口的情况下使用

document.onclick = function(){
    //在新窗口中打开baidu.com
    window.open("http://baidu.com")
}

　　

　　【2】传递了第二个参数，该参数可以已有窗口或者框架的名称，也可以是_self、_parent、_top、_blank

document.onclick = function(){
    //在当前窗口打开baidu.com
    window.open("http://baidu.com",‘_self‘)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<iframe src="http://baidu.com" name="frame1"></iframe>
</body>
<script>
document.onclick = function(){
    //在名字为frame的框架中打开qq.com
    window.open("http://qq.com",‘frame1‘)
}
</script>
</html>

　　　　[注意]若不存在第二个参数的名称，则等同于设置_blank,即打开新窗口

document.onclick = function(){
    //在名字为frame的框架中打开qq.com
    window.open("http://qq.com",‘abc‘)
}

　　【3】第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性

document.onclick = function(){
    //在新窗口中打开高度为500，宽度为500，纵坐标为0，横坐标为200的qq网页
    window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
}

　　　　【应用场景】通过window.open()返回的对象可以操作新打开的窗口

    //在父窗口中进行点击可以控制子窗口的打开和关闭
document.onclick = function(){
    if(!window.obj1){
        obj1 = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
    }else{
        //新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。
        console.log(obj1.opener == window)
        //关闭新打开的窗口
        obj1.close();
        //删除obj1属性
        delete window.obj1;
    }
}

　　　　　　[安全限制]如果不是通过点击操作或者其他间接操作，而是父窗口代码执行时直接执行window.open()语句，生成的子窗口会被大部分浏览器的弹出窗口屏蔽程序屏蔽掉。

var obj1 = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
if(obj1 == null){
    alert(‘弹出窗口被屏蔽了‘)
}

　　　　　　[检测弹出窗口是否被屏蔽]

var blocked = false;
try{
    var obj1 = window.open("http://baidu.com");
    if(obj1 == null){
        blocked = true;
    }
}cathc(ex){
    blocked = true;
}
if(blocked){
    alert("The popup was blocked");
}

定时器

　　JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调试代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

　　【1】超时调用(setTimeout())

　　　　接受两个参数:要执行的代码和以毫秒表示的时间。其中第一个参数可以是字符串也可以是函数

//1s之后弹出1
setTimeout("alert(1)",1000)
//[注意]不建议传递字符串，因为传递字符串可能导致性能损失
//1s之后弹出1
setTimeout(function(){
    alert(1);
},1000);

　　　　调用setTimeout()后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它调用cleatTimeout()方法来取消超时调用。

/设置超时调用
var timeoutId = setTimeout(function(){
    alert(1);
},1000);
//取消超时调用
clearTimeout(timeoutId);
//[注意]只要在指定的时间未过去之前调用clearTimeout()，就可以完全取消超时调用

　　【2】间歇调用(setInterval())

　　　　按照指定的时间间隔重复执行外码，直到间歇调用被取消或者页面被卸载。接受两个参数:要执行的代码和以毫秒表示的时间。其中第一个参数可以是字符串也可以是函数。

//每间隔1s之后弹出1
setInterval("alert(1)",1000)
//[注意]不建议传递字符串，因为传递字符串可能导致性能损失
//每间隔1s之后弹出1
setInterval(function(){
    alert(1);
},1000);

　　　　调用setInterval()方法同样可以设置一个间歇调用ID，这个ID是计划执行代码的唯一标识符，可以通过它调用cleatInterval()方法来取消间歇调用。

var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber(){
    num++;
    //如果执行次数达到了max设定的值，则取消后续未执行的调用
    if(num == max){
        clearInterval(intervalId);
        alert(‘1‘);
    }
}
intervalId = setInterval(incrementNumber,500);

　　　　在这个例子中，变量num每500ms递增一次，当递增到最大值时就会取消先前设定的间歇调用。这个模式也可以使用超时调用来实现。

var num = 0;
var max = 10;
function incrementNumber(){
    num++;
    //如果执行次数达到了max设定的值，则设置另一次超时调用
    if(num < max){
        setTimeout(incrementNumber,500);
    }else{
        alert("1");
    }
}
setTimeout(incrementNumber,500);
/*可见，在使用超时调用时，没有必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。*/

　　在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。最好不好使用间歇调用，使用超时调用来模拟间歇调用是一种最佳模式。

系统对话框

　　浏览器通过alert()、confirm()、prompt()方法来调用系统对话框向用户显示信息。通过这三个方法打开的对话框都是同步和模态的，也就是说显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

　　【1】alert():接收一个字符串并将其显示给用户

alert(1);

　　

　　【2】confirm():接收一个字符串，并将其显示给用户。返回的布尔值:true表示单击OK，false表示单击Cancel或者右上角的关闭按钮

if(confirm("Are you sure?")){
    alert("I‘m so glad you‘re sure !");
}else{
    alert("I‘m sorry to hear you‘re not sure.")
}

　　

　　【3】prompt():接收两个参数，要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)。如果用户单击了OK按钮，则返回文本输入域的值；如果用户单击了Cancel或者右上角的关闭按钮，则该方法返回null。

var result = prompt("What is your name?" ,"Mike");
if(result != null){
    alert("welcome,"+result);
}
console.log(result)

打印

　　打印对话框是异步显示的，能够将控制权立即交还给脚本。

//显示打印对话框
window.print();
时间： 2024-10-13 22:44:32

BOM之window对象的相关文章

JavaScript学习4：BOM之window对象

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己的想法去扩展它,那么浏览器共有的对象就成了事实的标准,所以,BOM本身是没有标准的或者说是还没有哪个组织去为它制定标准. 本文我们主要来看BOM中的核心对象:Window对象 Window对象是BOM的核心对象,它表示浏览器的一个实例.Window对象处于JavaScript结构的最顶层(如下图所示),对于每个打开的窗口,系统都会自动为其定义window对象. 1 对象的属性和方法 Wi

Bom基础-window对象

一.window对象 1.window对象(全局对象) -BOM是Browser Object Model的缩写,是浏览器对象模型 -核心是window对象,所有的全局变量和全局函数都被归在了window上 2.window对象方法(alert-confirm-prompt) -  \n够让alert .confirm等弹出框上的提示文字实现换行 (1)alert -语法:window.alert("content")   -功能:显示带有一段消息呵饿一个确认按钮德尔警告框 (2)co

BOM的window对象的属性及其方法

Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例.另外,该对象的实例也可由window.open()方法创建.由于window对象是其它大部 分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用.例如:window.document.write()可以 简写成: document.write(). 在窗口中觖发本窗

使用BOM 的window对象属性打开新窗口

★  示例1 要求:弹出新窗口,并向新窗口写入动态HTML代码 代码 <buttononclick="btnOpen()">打开新窗口</button> <hr/> <span>使用JavaScript打开一个新的浏览器选项卡,并向其中动态写入HTML代码</span> <script> function openNewWin(){ var w = window.open();/*打开空白窗口*/ var d =

黑马JavaScript学习一 BOM之Window对象定时器功能

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <body> 8 <img id="lunbo" src="img/banner_1.jpg" alt="&q

BOM的window对象的方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>window方法</title></head><body><script> //1.alert// alert('hello wo

Javascript中的window对象

Javascript中包括三部分:ECMAScript.BOM和DOM.window对象属于BOM. window对象,是js顶层对象,表示整个浏览器窗口,不仅仅js内容,整个HTML页面(包括所有元素和CSS内容)也都在window对象的管理之下. 示例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

Unit04： BOM 概述 、 window 对象 、 window 常用子对象-1

回顾: 1. Form对象: 如何找到:document.forms[序号|name] 如何找到数据采集的元素: document.forms[序号|name].elements[序号|name] 让元素获得或失去焦点:elem.focus() elem.blur() 获得/失去焦点的事件:onfocus   onblur 获得当前正在获得焦点的元素:document.activeElement 事件:onsubmit 在表单正式提交前自动触发 对整个表单执行验证 form.onsubmit=f

JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param+"<br/>"); } function print(param){ document.write(param); } window对象中的方式: 方法: confirm : bConfirmed = window.confirm( [sMessage]) 显示一个确认对话框