`
vinci.zhang
  • 浏览: 4315 次
  • 来自: ...
最近访客 更多访客>>
社区版块
存档分类
最新评论

[学习笔记]BOM(浏览器对象模型)中的常用对象

阅读更多
5.3 BOM
window----document----anchors, forms, images, links, location
             --frames
             --history
             --location
             --navigator
             --screen
5.3.1 window对象
是整个BOM的核心,表示整个浏览器窗口。如果页面使用框架集合,每个框架都有自己的window对象表示,存放在frames集合中。
top指的是最顶层的框架,即浏览器窗口自身。
parent
self
1. 窗口操作
window.moveBy(dx,dy)
window.moveTo(x,y)
window.resizeBy(dx,dy)
window.resizeTo(x,y)

    * IE 提供了window.screenLeft和window.screenTop对象来判断窗口的位置,但是未提供任何判断窗口大小的方法。用 document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小(显示HTML页的区域),但它们不是标准属性
    * Mozilla提供window.screenX,window.screenY属性判断窗口的位置,还提供了window.innerWidth和window.innerHeight属性判断视口的大小,window.outerWidth和 window.outerHeight判断浏览器窗口自身的大小。
    * Opera和Safari提供与Mozilla相同的工具。


2. 导航和打开新窗口
window.open("http://www.wrox.com/", "topFrame", "height=150,width=300,top=10,left=10,resizable=yes"):
最多4个参数:
要载入新窗口的页面的URL;
新窗口的名字: 或者_self, _parent, _top, _blank
特性字符串: 用逗号分割,都好前后不能有空格。包括left, top, height, width, resizable, scrollable, toolbar, status, location
说明是否用新载入的页面替换当前载入的页面。
返回:window对象
举例:var openWin = window.open("http://www.wrox.com", "wroxwindow", "");
可以调用close()方法关闭新创建的窗口openWin.close()─只对新创建的窗口有效。
新窗口还可以对打开它的窗口有引用,放在opener数刑种,只有最高层window对象才有opener属性,可以用top.opener访问。

3. 系统对话框
alert("")
confirm("Are you sure?"):返回Boolean值
prompt("What's your name?", "Michael"):返回文本框中的值这些对话框都是系统窗口,都是模式的。

4. 状态栏
status:使状态栏的文本暂时改变;
defaultStatus:

5. 时间间隔和暂停
var iTimeoutId = setTimeout("alert('show me!')", 1000);
返回一个数字暂停的id,可以取消它:
clearTimeout(iTimeoutId);

6. 历史
window.history.go(-1);
history.back(), history.forward();
history.length: 历史的页面数量

5.3.2 document对象
通用的属性
alinkColor, bgColor, fgColor, lastModified, referer, title, URL, vlinkColor
集合:anchors, applets, embeds, forms, images, links

5.5.3 location对象
hash: 如果url包含#,返回#及之后的内容
host:服务器的名字
hostname:等于host
href:当前载入的页面的完整url
pathname:url中主机名后的部分
port:端口
protocol:
search:?后面的部分

重定向:location.href="", 或者location.assign("")
重新载入:location.reload()
不让包含脚本的页面能从浏览器历史中访问,用:location.replace("")

location是window和document共同的属性

5.5.4 navigator对象
一般用于获取浏览器类型

5.5.5 screen对象
availHeight, availWidth, colorDepth, height, width
可以这样填充屏幕:
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
分享到:
评论

相关推荐

    JS学习笔记(BOM,DOM,字符串方法等)

    - BOM是浏览器对象模型,它允许JavaScript与浏览器交互,比如控制窗口、导航、弹出对话框等。虽然这里没有详细描述BOM的具体内容,但在实际应用中,BOM主要用于操作浏览器窗口、历史记录、地理位置、cookies等。 4...

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

     ECMAScript是 JavaScript的核心,但是在 Web中使用的 JavaScript, BOM (浏览器对象模型)才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,但这些功能与任何网页内容无关。 二、window 对象下的属性...

    JavaScript-学习笔记.pdf

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

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

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

    3.js.BOM.rar

    《3.js.BOM——前端开发的核心知识解析》 ...通过“3.js.BOM.rar”中的笔记和资料,学习者将能深入理解BOM的每一个角落,从而在实际项目中更好地控制和利用浏览器,创造出更加丰富和动态的网页应用。

    JavaWeb02-JavaScript学习笔记

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

    JavaScript学习笔记

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

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

    我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准; [所有浏览器公共遵守的标准] 2. BOM 是 ...

    js笔记整理BOM和DOM,es5和es6

    JavaScript是Web开发中不可或缺的一部分,主要分为两个核心部分:BOM(浏览器对象模型)和DOM(文档对象模型),以及两种版本:ES5和ES6。本文将深入探讨这些概念及其重要知识点。 首先,BOM(Browser Object Model...

    java私人学习笔记

    Java私人学习笔记主要涵盖了Java编程语言以及与其相关的几个著名框架——Spring、Struts2和Hibernate,还有前端开发中常用的JavaScript。这些技术在IT行业中的应用广泛,是许多企业级应用开发的基础。以下是对这些...

    Java学习第九部分笔记

    * JavaScript版本:ECMAScript语法、文档对象模型(DOM)、浏览器对象模型(BOM) 二、JavaScript基础 * 变量:var、let、const的区别 + var定义的变量,没有块的概念,可以跨块访问,但不能跨函数访问 + let...

    javascript 基础学习笔记.pdf

    * BOM(Browser Object Model):浏览器对象模型,里面提供了一些属性和方法,可以让我们操作浏览器。 变量和常量 在 JS 中,变量的值是可以变化的,而常量的值是不可变的。JS 中定义变量的方法有: * var 变量名...

    我的JavaScript学习笔记

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

    js学习笔记

    浏览器对象模型(BOM)允许JavaScript操作浏览器窗口,如位置、大小、历史记录等。AJAX(异步JavaScript和XML)是实现页面无刷新更新的关键技术,通过XMLHttpRequest对象实现与服务器的异步通信。 八、ES6及后续...

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

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

    javascript学习笔记1

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

    javaScript的笔记

    BOM,浏览器对象模型,允许JavaScript与浏览器进行交互。它将浏览器视为一个整体的对象,其中包含多个子对象,如Window、Navigator、Screen、History和Location。Window对象是BOM的核心,代表浏览器的一个窗口或框架...

    jsp学习笔记-yishanjing

    #### 浏览器对象模型 (BOM) 细节 1. **Location 对象**:提供了对当前 URL 的读取和修改。 - 方法: - `reload()`:刷新当前页面。 - `replace(url)`:替换当前页面。 - 属性: - `href`:获取或设置完整的 URL...

    javascript学习笔记

    浏览器对象模型(BOM)则允许JavaScript与浏览器进行交互,如控制窗口、获取用户屏幕尺寸、设置定时器等。BOM使得JavaScript能处理非文档相关的任务,如导航、弹出新窗口和处理用户时间。 JavaScript有多个版本,从...

Global site tag (gtag.js) - Google Analytics