JavaScript之浏览器对象_动力节点Java学院整理


Posted in Javascript onJuly 03, 2017

JavaScript可以获取浏览器提供的很多对象,并进行操作。

window

window对象不但充当全局作用域,而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

兼容性:IE<=8不支持。

// 可以调整浏览器窗口大小试试:
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

对应的,还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高。

navigator

navigator对象表示浏览器的信息,最常用的属性包括:

  • navigator.appName:浏览器名称;
  • navigator.appVersion:浏览器版本;
  • navigator.language:浏览器设置的语言;
  • navigator.platform:操作系统类型;
  • navigator.userAgent:浏览器设定的User-Agent字符串。
alert('appName = ' + navigator.appName + '\n' +
   'appVersion = ' + navigator.appVersion + '\n' +
   'language = ' + navigator.language + '\n' +
   'platform = ' + navigator.platform + '\n' +
   'userAgent = ' + navigator.userAgent);

请注意,navigator的信息可以很容易地被用户修改,所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码,喜欢用if判断浏览器版本,例如:

var width;
if (getIEVersion(navigator.userAgent) < 9) {
  width = document.body.clientWidth;
} else {
  width = window.innerWidth;
}

但这样既可能判断不准确,也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性,直接用短路运算符||计算:

var width = window.innerWidth || document.body.clientWidth;

screen

screen对象表示屏幕的信息,常用的属性有:

  • screen.width:屏幕宽度,以像素为单位;
  • screen.height:屏幕高度,以像素为单位;
  • screen.colorDepth:返回颜色位数,如8、16、24。
alert('Screen size = ' + screen.width + ' x ' + screen.height);

location

location对象表示当前页面的URL信息。例如,一个完整的URL:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。要获得URL各个部分的值,可以这么写:

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加载一个新页面,可以调用location.assign()。如果要重新加载当前页面,调用location.reload()方法非常方便。

if (confirm('重新加载当前页' + location.href + '?')) {
  location.reload();
} else {
  location.assign('/discuss'); // 设置一个新的URL地址
}

document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的<title>xxx</title>读取的,但是可以动态改变:

document.title = '努力学习JavaScript!';

请观察浏览器窗口标题的变化。

要查找DOM树的某个节点,需要从document对象开始查找。最常用的查找是根据ID和Tag Name。

我们先准备HTML数据:

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
  <dt>摩卡</dt>
  <dd>热摩卡咖啡</dd>
  <dt>酸奶</dt>
  <dd>北京老酸奶</dd>
  <dt>果汁</dt>
  <dd>鲜榨苹果汁</dd>
</dl>

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:

var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;

menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'

drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
  s = s + drinks[i].innerHTML + ',';
}
alert(s);

摩卡
热摩卡咖啡
酸奶
北京老酸奶
果汁
鲜榨苹果汁

document对象还有一个cookie属性,可以获取当前页面的Cookie。

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求,就可以用Cookie来区分。当一个用户成功登录后,服务器发送一个Cookie给浏览器,例如user=ABC123XYZ(加密的字符串)...,此后,浏览器访问该网站时,会在请求头附上这个Cookie,服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置,例如,页面显示的语言等等。

JavaScript可以通过document.cookie读取到当前页面的Cookie:

document.cookie; // 'v=123; remember=true; prefer=zh'

由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全隐患,这是因为在HTML页面中引入第三方的JavaScript代码是允许的:

<!-- 当前页面在wwwexample.com -->
<html>
  <head>
    <script src="http://www.foo.com/jquery.js"></script>
  </head>
  ...
</html>

如果引入的第三方的JavaScript中存在恶意代码,则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题,服务器在设置Cookie时可以使用httpOnly,设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现,主流浏览器均支持httpOnly选项,IE从IE6 SP1开始支持。

为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly。

history

history对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或forward (),相当于用户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象,对于现代Web页面来说,由于大量使用AJAX和页面交互,简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back(),试图回到登录前的页面。这是一种错误的方法。

任何情况,你都不应该使用history这个对象了。

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 #Javascript
React组件生命周期详解
Jul 03 #Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 #Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
jQuery实现点击关注和取消功能
Jul 03 #jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 #Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 #Javascript
You might like
收藏的一个php小偷的核心程序
2007/04/09 PHP
PHP获取文件行数的方法
2015/06/10 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
React如何避免重渲染
2018/04/10 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
如何基于python操作json文件获取内容
2019/12/24 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python 监控logcat关键字功能
2020/09/04 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
中介公司区域经理岗位职责范本
2014/03/02 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
出纳岗位职责
2015/01/31 职场文书
青岛海底世界导游词
2015/02/11 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python