JavaScript基础学习(七)—BOM
BOM(Browser Object Model): 浏览器对象模型。提供了独立于内容而与浏览器窗口交互的对象,BOM主要用于管理窗口和窗口之间的通讯。
一、Navigator对象
navigator对象通常用于获取浏览器和操作系统的信息。
navigator对象是window对象的属性,中文是"导航器"的意思。
由于navigator没有统一的标准,因此各个浏览器都有自己不同的navigator版本,这里只介绍最普遍支持且最常用的。

navigator中最重要的是userAgent属性,返回包含浏览器版本等信息的字符串,其次cookieEnabled也很重要,使用它可以判断用户浏览器是否开启cookie。
document.write(
"浏览器信息:<br>"+
"名称:"+navigator.appName+"<br>"+
"平台和版本:"+navigator.appVersion+"<br>"+
"操作系统:"+navigator.platform+"<br>"+
"userAgent:"+navigator.userAgent
);
结果:

二、History对象
window.history 对象包含浏览器的历史。浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能。可以通过back函数后退一个页面,forward函数前进一个页面,或者使用go函数任意后退或前进页面,还可以通过length属性查看history对象中存储的页面数。

对于 go() 方法的说明。
语法:
history.go(x);
其中,x (整数)为前进或后退的页面数。
x > 0: 前进 x 个页面;
x < 0: 后退 -x 个页面;
x = 0: 刷新当前页面。
<html>
<head> <title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" charset="UTf-8"> function test1(){
//返回上一个网页
history.back();
} function test2(){
//前进一页
history.forward();
} function test3(){
//刷新当前页面
history.go(0);
} </script> </head>
<body> <input type="button" onclick="test1();" value="返回上一个网页"><br><br>
<input type="button" onclick="test2();" value="跳转到下一个页面"><br><br>
<input type="button" onclick="test3();" value="刷新当前页面"><br><br> </body>
</html>
三、Location对象
window.location 对象用来获取当前页面的地址 (URL)信息,并可将浏览器重定向到其他页面。

function locationTest(){
var str = location.href;
alert(str); // http://localhost:8080/Day01_JS/index.jsp
//发生请求跳转到其他页面
location.href = "http://www.baidu.com";
}
四、Screen对象
window.screen 对象用来获取用户屏幕的信息。

function alertTest(){
alert(
"屏幕信息:\n"+
"分辨率:"+screen.width+"×"+screen.height+"\n"+
"可用区域:"+screen.availWidth+"×"+screen.availHeight
);
}
结果:
屏幕信息:
分辨率:1366×768
可用区域:1366×728
五、Window对象
未完待续
JavaScript基础学习(七)—BOM的更多相关文章
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
- 48.javascript基础学习
javascript基础学习: http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...
- JavaScript 基础学习(二)js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- JavaScript 基础 学习 (四)
JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 元素.on事件类型 = null 因为赋值的关系,所以给事件赋值为 null 的时候 事件触发的时候,就没有事件处理 ...
- JavaScript 基础 学习(三)
JavaScript 基础 学习(三) 事件三要素 1.事件源: 绑定在谁身上的事件(和谁约定好) 2.事件类型: 绑定一个什么事件 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
- JavaScript 基础 学习 (二)
JavaScript 基础 学习 节点属性 每一个节点都有自己的特点 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法:节点.nodeT ...
- JavaScript 基础 学习 (一)
JavaScript 基础 学习 获取页面中的元素的方法 作用:通过各种方式获取页面中的元素 比如:id,类名,标签名,选择器 的方式来获取元素 伪数组: 长的和数组差不多,也是按照索引排 ...
- 几张非常有意义的JavaScript基础学习思维图
分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...
- javascript基础学习(七)
javascript之Object对象 学习要点: 创建Object对象 Object对象属性 Object对象方法 一.创建Object对象 new Object(); new Object(val ...
随机推荐
- 浅谈PHP的CI框架(一)
作为前端开发人员,掌握一门后端语言是必不可少的,PHP的CI框架是一个快速开发框架,基于MVC,比较接近原生PHP,在原有的PHP代码上封装了许多类,易上手,容易扩展,适用于小项目,并且CI的文档及案 ...
- XML与JavaScript知识
什么是XMLHttpRequest 对象? 答:XMLHttpRequest 对象用于在后台与服务器交换数据,它是开发者的梦想,因为它能够:1.在不重新加载页面的情况下更新网页:2.在页面已加载后从服 ...
- Java虚拟机学习 - 体系结构 内存模型(1)
一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代" ."非堆", 它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内 ...
- ASP.NET MVC4.0+ WebAPI+EasyUI+KnockOutJS快速开发框架 通用权限管理系统
1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性高.有利软件 ...
- HTML第一课
<标签名 属性>内容</标签名> <标签/> 静态网页与动态网页的区别:是否从数据库提取数据相对路径跟绝对路径../代表高一级的 牛逼的空格< ...
- 一道面试题引发的对javascript类型转换的思考
最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...
- 瞎谈CNN:通过优化求解输入图像
本文同步自我的知乎专栏: From Beijing with Love 机器学习和优化问题 很多机器学习方法可以归结为优化问题,对于一个参数模型,比如神经网络,用来表示的话,训练模型其实就是下面的参数 ...
- 【解题报告】VijosP1351 棋盘制作
思路: 1. 矩形:用f[i][j][1]表示右下角为(I,j),最大的,符合条件的矩形的长,用f[i][j][2]表示右下角为(I,j),最大的,符合条件的矩形的高,预设f内所有元素为1 If(a[ ...
- std::copy性能分析与memmove机器级实现
复制数据的快速方法std::copy C++复制数据各种方法大家都会,很多时候我们都会用到std::copy这个STL函数,这个效率确实很不错,比我们一个一个元素复制或者用迭代器复制都来的要快很多. ...
- Mysql5.7服务下载安装
身处MySQL这个圈子,能够切身地感受到大家对MySQL 5.7的期待和热情,似乎每个人都迫不及待的想要了解.学习和使用MySQL 5.7.那么,我们不禁要问,MySQL 5.7到底做了哪些改进,引入 ...