window 对象

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

获取窗口大小

var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}

调整浏览器窗口

resizeTo()接收浏览器窗口的新宽度和新高度,而resizeBy()接收新窗口与原窗口的宽
度和高度之差
//调整到100×100
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);

打开窗口

window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4 个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
第二个参数也可以是下列任何一个特殊的窗口名称:_self、_parent、_top 或_blank。

location 对象

属性

位置操作

location.assign("http://www.wrox.com"); // 打开一个新的网页
window.location = "http://www.wrox.com"; // 就可以立即打开新URL 并在浏览器的历史记录中生成一条记录
location.href = "http://www.wrox.com";
修改location 对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、hostname、pathname 和port 属性设置为新值来改
变URL。
  • 每次修改location 的属性(hash 除外),页面都会以新URL 重新加载。
  • replace(),只接受一个参数,即要导航到的URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。
  • reload(),作用是重新加载当前显示的页面。

history 对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为
history 是window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框
架,都有自己的history 对象与特定的window 对象关联。
1. go(n),传递一个数字或者是URL,数字表示前后跳转,URL表示跳转到此页面,但是RUL必须在history中体现。
2. forward()前进
3. back()后退

BOM的使用的更多相关文章

  1. HTML BOM Browser对象

    BOM:Browser Object Model,即浏览器对象模型,提供了独立于内容的.可以与浏览器窗口进行互动的对象结构. Browser对象:指BOM提供的多个对象,包括:Window.Navig ...

  2. 一步步学习javascript基础篇(7):BOM和DOM

    一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...

  3. BOM,DOM,ECMAScripts三者的关系

    一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁.   DOM下,HTM ...

  4. javascript学习之BOM

    BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...

  5. BOM以及定时器

    一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...

  6. js浏览器对象模型(BOM)

    浏览器对象模型(Browser Object Model,BOM):浏览器为js提供的对象集合. 1 windows对象 windows对象:表示浏览器的框架以及与其相关的内容,比如滚动条和导航栏图标 ...

  7. BOM操作

    BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red" ...

  8. 什么是BOM头,BOM头有什么影响,怎么去掉BOM头

    什么是bom头? 在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也 ...

  9. Txt格式配置表无法解析的问题——BOM

    今天再次遇到同一个问题:策划给来一个Txt格式配置表,我用解析类去读取,返回的结果为空.解析类参数是:主键key,文件名fileName,错误提示errorTip. 写读取语句的时候,主键key我是直 ...

  10. BOM对象有哪些:

    BOM对象有哪些: 1.window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性: 2.document对象,文档对象: 3.location对象,浏览器当前URL信息: 4 ...

随机推荐

  1. 从 0 开始手写一个 Mybatis 框架,三步搞定!

    阅读本文大概需要 3 分钟. MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码. 本文完成的Mybatis功能比较简单,代码还有许 ...

  2. CentOS7编译安装MySQL5.7.24

    目录 安装依赖 安装boost 编译安装MySQL 配置 登录MySQL,修改密码 安装依赖 (1)cmake是新版MySQL的编译工具 sudo yum install gcc gcc-c++ pc ...

  3. Tomcat 部署项目无法加载静态资源

    首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行 ...

  4. core跨域问题

    #region 跨域问题 app.UseCors(builder => builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() ...

  5. oo第二单元的自白

    电梯第一次作业 第一次电梯较为简单,主要目的在于初步接触多线程,可以实现一些简单的操作. 在本次作业中,为了更好的了解多线程,我也阅读了一些代码,并据此仿写完成了第一次作业. 根据生产者和消费者的模式 ...

  6. Python档案袋(脚本执行和输入输出)

    脚本的执行: 1.执行时确定解释器为Python3 python3 脚本名 2.在代码开始行确定解释器为Python3,与shell相似 env命令表示全局搜索Python3解释器 #!/usr/bi ...

  7. PostgreSQL踩坑现场

    1.PostgreSQL表名.字段名.别名等大小敏感,默认都会转化成小写形式.如果名字中有大写字母,必须分别添加双引号.在写后台时,注意添加\ 如表名:TestTable中有个字段名userName ...

  8. 我面试过没有上万人也有十几个,简历要这么写才有hr要你

    今天终于有时间好好给大家写写关于如何写简历,给自己加分了. 这篇文章拖了很久了应该说,本来想在上周写的,但是事情实在是太多,又不想草草了事,所以搁置到现在.今天早上正好空出来了,就马上给大家码出来了. ...

  9. 剑指offer【03】- 从尾到头打印链表(4种实现方法)

    题目:从尾到头打印链表 考点:链表 题目描述:输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 法一:ArrayList头插法 /** * public class ListNode ...

  10. linux取IP的几个方法

    ifconfig eth0|grep " inet add"|cut -d":" -f2|cut -d " " -f1 ifconfig e ...