(7)JavaScript-BOM

window 对象

全局作用域

在浏览器中, window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。

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

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

窗口关系及框架

。。

窗口位置

使用下列代码可以跨浏览器取得窗口左边和上边的位置

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

moveTo()接收的是新位置的 x 和 y 坐标值,而 moveBy()接收的是在水平和垂直方向上移动的像素数

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动 100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动 50 像素
window.moveBy(-50,0)

需要注意的是,这两个方法可能会被浏览器禁用 ,另外,这两个方法都不适用于框架,只能对最外层的 window 对象使用

窗口大小

outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸
innerWidth 和 innerHeight则表示该容器中页面视图区的大小(减去边框宽度)

使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小

其中 resizeTo()接收浏览器窗口的新宽度和新高度,而 resizeBy()接收新窗口与原窗口的宽度和高度之差

//调整到 100× 100
window.resizeTo(100, 100);
//调整到 200× 150
window.resizeBy(100, 50);
//调整到 300× 300
window.resizeTo(300, 300);

这两个方法可能会被浏览器禁用 ,另外,这两个方法都不适用于框架,只能对最外层的 window 对象使用

导航和打开窗口

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

通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用

时间: 2025-01-17 04:43:31

(7)JavaScript-BOM的相关文章

HTML5移动开发之路(26)—— JavaScript回顾1

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(26)-- JavaScript回顾1 很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天.今天很重要,明天会更重要.现在好多基于JavaScript的框架给我们的开发带来了很大便利,但是要更好的使用这些工具,我们就必须对JavaScript有一个更高的认识,翻开以前的笔记,开始复习吧. 一.JavaScript的作用

HTML5移动开发之路(29)—— JavaScript回顾4

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(29)-- JavaScript回顾4 一.变量的作用域 JavaScript脚本的执行过程分为两个阶段: 第一阶段,js引擎()先扫描整个javascript代码.当碰到<script>时,会先创建一个全局的活动对象,将<script>中出现的变量的声明,函数的定义保存在活动对 象里面.如果碰到函数,则创建对应的局部活动对象,将函数内部的变量的声明及函数的定义保存在该活动对象里面. 第二阶段

HTML5移动开发之路(30)—— JavaScript回顾5

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(30)-- JavaScript回顾5 一.查找 第一种方式:依据id查找 var obj = document.getElementById(id);   //document是HTMLDocument的实例 [html] view plain copy print? <html> <head> <script> function f1(){ var obj = document

HTML5移动开发之路(27)—— JavaScript回顾2

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(27)-- JavaScript回顾2 JavaScript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 [javascript] view plain copy print? function Person(name, age){ //习惯上第一个字母大写 //this修饰的变量称为属性 this.name = name; this.age = age; //如果属性值是一个函数,则这个

HTML5移动开发之路(28)—— JavaScript回顾3

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(28)-- JavaScript回顾3 一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型   //前三个都有对应的包装类 null:空类型 undefined:未定义类型 测试一: [html] view plain copy print? <html> <!--基本类型测试--> <head> <

(2)JavaScript数据类型

数据类型 JavaScript 中的数据类型分为原始类型和对象类型: 原始类型 数字 字符串 布尔值 对象类型 数组 "字典" ... 特别的,数字.布尔值.null.undefined.字符串是不可变. 注: // null.undefined null是JavaScript语言的关键字,它表示一个特殊值,常用来描述"空值". undefined是一个特殊值,表示变量未定义. 1.数字(Number) JavaScript中不区分整数值和浮点数值,JavaScri

[连载]JavaScript讲义(03)--- JavaScript面向对象编程

[连载]JavaScript讲义(03)--- JavaScript面向对象编程,布布扣,bubuko.com

(一)、BOM:Browser Object Model

BOM window 打开关闭窗口 窗口大小和窗口位置 ****定时器 (一).BOM:Browser Object Model 浏览器对象模型:用来访问和操作浏览器窗口,使JS有能力与浏览器交互. 专门操作浏览器窗口的API--没有标准,有兼容性问题 浏览器对象模型的主要对象 window:代表整个窗口是BOM的根对象 2个角色:1.代替global称为全局作用域对象  2.封装所有DOM API 和BOM API 以下为window的子对象 1.history:封装当前窗口打开后,成功访问过

(1)JavaScript基础知识

Javascript基础知识 1.如何使用JavaScript (1).通过<script></script>中直接编写 (2).通过<script src='目标文档的URL'></script>链接外部的Js文件 ① <script  src="URL" type="text/javascript" charset="utf-8"></script> (3).作为某个元素

(转)JavaScript判断浏览器类型及版本

IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是IE.而IE各个版本典型的userAgent如下: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)        Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)        Mozilla/