`

JavaScript BOM学习笔记——window对象2

 
阅读更多

1.窗口操作:

        window对象对于操作浏览器窗口非常有用,开发人员可以利用window对象移动或者调整浏览器窗口大小。主要操作有:

 

<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
	function operWindow() {
		//浏览器向右移动20像素,向下移动20像素
		window.moveBy(20,20);
		//浏览器变为150像素宽,300像素高
		window.resizeTo(150,300);
		//将浏览器窗口宽度加宽150像素,高度不变
		window.resizeBy(150,0);
		//将浏览器移动到(0,0)位置
		window.moveTo(0,0);
	}
  </script>
 </head>

 <body onload="operWindow();">
 </body>
</html>

 如果需要知道浏览器的位置以及大小,由于各个浏览器实现的标准不同意,产生了一些问题:

(1)IE提供了window.screenLeft和window.screenTop来判断窗口的位置,但是没有提供任何判断窗口大小的方法。但是可以通过document.body.offsetWidth和document.body.offsetHeight来判断浏览器视口的大小。

(2)Mozilla window.screenX和window.screenY来判断窗口的位置,使用window.innerWidth和window.innerHeight判断视口大小,通过提供window.outerWidth和window.outerHeight判断浏览器大小;

 

<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
	function getIEWindowInfo() {
		alert("窗口位置:("+window.screenLeft+","+window.screenTop+")");
		alert("视口大小:("+document.body.offsetWidth+","+document.body.offsetHeight+")");
	}
	function operWindow() {
		//浏览器向右移动20像素,向下移动20像素
		window.moveBy(20,20);
		//浏览器变为150像素宽,300像素高
		window.resizeTo(150,300);
		//将浏览器窗口宽度加宽150像素,高度不变
		window.resizeBy(150,0);
		//将浏览器移动到(0,0)位置
		window.moveTo(0,0);
		getIEWindowInfo();
	}
  </script>
 </head>

 <body onload="operWindow();">
 </body>
</html>

 上面的例子,在IE8中的结果与上面的解释不一致。我怀疑上面的解释是针对早期版本的。

 

<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
	function getIEWindowInfo() {
		alert("窗口位置:("+window.screenLeft+","+window.screenTop+")");
		alert("视口大小:("+document.body.offsetWidth+","+document.body.offsetHeight+")");
	}
	function getFFWindowInfo() {
		alert("窗口位置:("+window.screenX+","+window.screenY+")");
		alert("窗口大小:("+window.outerWidth+","+window.outerHeight+")");
		alert("视口大小:("+window.innerWidth+","+window.innerHeight+")");
	}
	function operWindow() {
		//浏览器向右移动20像素,向下移动20像素
		window.moveBy(20,20);
		//浏览器变为150像素宽,300像素高
		window.resizeTo(150,300);
		//将浏览器窗口宽度加宽150像素,高度不变
		window.resizeBy(150,0);
		//将浏览器移动到(0,0)位置
		window.moveTo(0,0);
		getIEWindowInfo();
	}
  </script>
 </head>

 <body onload="operWindow();">
 </body>
</html>

 这个例子在Firefox上倒是正常的。

 

尽管移动窗口和调整浏览器的位置是一件很酷的事情,但是应该尽量少用,这些会对用户的操作产生影响。

 

参考书:
《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。

分享到:
评论

相关推荐

    Javascript高级编程学习笔记27——BOM1window对象1.docx

    JavaScript高级编程的学习中,BOM(Browser Object Model)占据着重要的地位,因为它使得JavaScript能够与浏览器进行交互。在浏览器环境中,JavaScript的核心语法是ECMAScript,但BOM提供了与浏览器功能交互的一系列...

    JavaScript-学习笔记.pdf

    以上是JavaScript学习笔记中提到的一些核心知识点,通过对这些知识点的理解和熟练应用,可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中,结合具体的项目需求,这些知识会得到更深入的拓展和应用...

    javascript从入门到跑路—–小文的js学习笔记(8)—–bom的对象及其用法—window 、History、location、navigator 、screen

    javascript从入门到跑路—–小文的js学习笔记(1)———script、alert、document。write() 和 console.log 标签 … … javascript从入门到跑路—–小文的js学习笔记目录 ** 一、BOM(Browers,Object,model)...

    JavaScript达内学习笔记

    ### JavaScript达内学习笔记知识点详解 #### 一、JavaScript简介 1. **JavaScript**是由网景公司在1995年开发的一种脚本语言。它是一种轻量级的编程语言,无需编译,直接由浏览器解释执行。JavaScript的主要作用...

    javascript学习笔记1

    ### JavaScript 学习笔记1:数组、DOM与BOM简要总结 #### 数组方法概述 在JavaScript中,数组是一种非常重要的数据结构,用于存储多个值。数组对象提供了多种方法来帮助我们操作数组中的元素。 - **pop()**:从...

    JavaWeb02-JavaScript学习笔记

    JavaScript基础知识点 JavaScript是一种脚本语言...本笔记涵盖了JavaScript的基础知识点,包括变量、数据类型、流程控制语句、函数、数组、对象、JSON、BOM和Location等概念,为学习JavaScript提供了一个良好的基础。

    我的JavaScript学习笔记

    这篇学习笔记将带你深入了解JavaScript的基础和一些进阶应用。 首先,我们从"Js基本语法"开始。JavaScript是一种弱类型、解释型的脚本语言,它支持变量声明(var、let、const)、数据类型(包括基本类型:字符串、...

    JavaScript学习笔记

    ### JavaScript学习笔记 #### JavaScript简介 JavaScript是一种广泛使用的脚本语言,主要应用于Web前端开发,用来为网页添加交互性。JavaScript不仅可以操作HTML和CSS,还能处理数据、响应用户输入,并与服务器通信...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之Javascript学习笔记

    BOM(浏览器对象模型)和DOM(文档对象模型)是JavaScript操作网页元素的重要概念。BOM提供了一种与浏览器交互的方式,允许JavaScript操作浏览器窗口、导航、历史记录等。DOM是HTML和XML文档的结构化表示,通过DOM,...

    狂神说系列 JavaScript笔记

    - BOM(浏览器对象模型):理解window对象、location、navigator等,可以进行浏览器相关的交互。 - Node.js:JavaScript在服务器端的应用,利用其非阻塞I/O和事件驱动模型构建高性能服务。 以上只是【狂神说系列 ...

    javaScript达内培训笔记

    ### JavaScript基础概述与核心知识点详解 ...以上内容涵盖了JavaScript的基础语法、数据类型、字符串处理、数组操作、函数、正则表达式、数学计算以及面向对象编程的概念,是学习和掌握JavaScript的重要知识点。

    我的javascript学习笔记记录

    ### JavaScript 学习笔记知识点详解 #### 在HTML中使用JavaScript - **`&lt;script&gt;`元素**: HTML文档中插入JavaScript的主要方式。它可以放置在文档的`&lt;head&gt;`部分或`&lt;body&gt;`部分。 - **内联脚本**: 直接在`...

    JavaScript从入门到精通学习笔记

    ### JavaScript从入门到精通学习笔记 #### 一、JavaScript简介 **1.1 JavaScript是什么** JavaScript 是一种轻量级的编程语言,主要被用于客户端(浏览器端)的脚本语言,能够实现动态网页效果,增强用户体验。...

    javascript学习笔记(三)BOM和DOM详解

    js组成 ...3. window 是 BOM 对象,而非 js 对象; DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。 BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的

    3.js.BOM.rar

    本文件“3.js.BOM.rar”正是为前端学习者提供的一份宝贵资源,它包含了丰富的笔记和资料,旨在帮助初学者或有经验的开发者深入理解和掌握JavaScript的BOM特性。 BOM是浏览器提供的一种接口,允许JavaScript操作...

    javaScript的笔记

    这篇笔记主要涵盖了JavaScript中的两个重要概念:BOM(Browser Object Model)和DOM(Document Object Model)。 BOM,浏览器对象模型,允许JavaScript与浏览器进行交互。它将浏览器视为一个整体的对象,其中包含多...

    JS学习笔记,相比上一个修复了轮播图下方小圆圈问题

    本学习笔记针对JS的基础知识、浏览器对象模型(BOM)以及文档对象模型(DOM)的操作进行了深入探讨,尤其针对之前轮播图下方小圆圈问题进行了修复。 一、JS基础知识 JavaScript语法基础包括变量、数据类型、运算符...

    [邵山欢]javascript公开课资料及笔记

    JavaScript语法基础是学习的起点,包括变量声明(var、let、const)、数据类型(字符串、数字、布尔值、null、undefined、对象、数组等)、运算符(算术、比较、逻辑、赋值等)以及控制流语句(条件判断、循环结构、...

    day03_JavaScript预习笔记1

    总的来说,这个学习笔记涵盖了JavaScript的基础知识、Ajax编程、jQuery框架以及相关插件的使用,为深入理解和实践JavaScript提供了坚实的基础。无论是前端开发还是全栈开发,掌握这些技能都是非常重要的。

    accp6.0 使用Javascript增强交互效果 笔记

    - **浏览器对象模型 (BOM)**:提供了一系列浏览器窗口相关的API,使得JavaScript能够与浏览器进行交互。 - **文档对象模型 (DOM)**:DOM定义了访问和操作HTML文档的标准,使得开发者可以通过JavaScript来动态修改...

Global site tag (gtag.js) - Google Analytics