js5【金沙官网线上】-bom

window对象

什么是BOM

1、确定浏览器窗口的尺寸的方法 

BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

>ie8,chrome,safari等现代浏览器:

目前主流浏览器介绍

  • window.innerHeight - 浏览器窗口的内部高度(不包含控制台的height)
  • window.inner Width - 浏览器窗口的内部宽度(不包含控制台的width)

IE——11: 国内用得最多的IE浏览器,历来对W3C标准支持差。从IE10开始支持ES6标准;

ie5,6,7,8:

Sarafi:Apple的Mac系统自带的基于Webkit内核的浏览器,从OS X 10.7 Lion自带的6.1版本开始支持ES6,目前最新的OS X 10.10 Yosemite自带的Sarafi版本是8.x,早已支持ES6;

  • document.documentElement.clientHeight- 浏览器窗口的内部高度(不包含控制台的height)
  • document.documentElement.clientWidth - 浏览器窗口的内部宽度(不包含控制台的width)

Firefox:Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey。早期的Firefox按版本发布,后来终于聪明地学习Chrome的做法进行自升级,时刻保持最新;

2、打开新窗口api:

移动设备上目前iOS和Android两大阵营分别主要使用Apple的Safari和Google的Chrome,由于两者都是Webkit核心,结果HTML5首先在手机上全面普及(桌面绝对是Microsoft拖了后腿),对JavaScript的标准支持也很好,最新版本均支持ES6。

  • window.open() - 常用

这里为什么没有说到360浏览器、搜狗浏览器呢?其实这一类浏览器只是在以上列举出来的浏览器的内核基础上,换了一个包装,添加了一些个性功能而已,本质上并没有什么区别。

用户屏幕信息的对象(window.screen)

可以操作的BOM对象

  • screen.availWidth - 屏幕可用的宽度
  • screen.availHeight - 屏幕可用的高度

window对象

当前页面的地址对象(window.location)

所有浏览器都支持 window 对象。它表示浏览器窗口。

  • location.href - 获取当前页面的完整地址
  • location.hostname - 获取当前页面主机的域名
  • location.pathname - 获取当前页面的路径和文件名
  • location.port - 获取web主机的端口
  • location.protocol - 获取所使用的web协议(http或者https)

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

浏览器的历史信息(window.history)

全局变量是 window 对象的属性。

  • history.go(number) - 参数是数字,栗子:-1代表上一个页面,1代表下一个页面,-2,2同理
  • history.back() - 返回上一个页面
  • history.forward() - 进入下一个页面

全局函数是 window 对象的方法。

有关访问者浏览器的信息(window.navigator)

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

  • navigator.userAgent - 常用,获取用户浏览器的信息

window.document.getElementById("header");

 

与此相同:

document.getElementById("header");

window尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

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

其他操作window方法(不常用)

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

navigator

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

navigator.appName:浏览器名称;

金沙官网线上,navigator.appVersion:浏览器版本;

navigator.language:浏览器设置的语言;

navigator.platform:操作系统类型;

navigator.userAgent:浏览器设定的User-Agent字符串。

window.navigator 对象在编写时可不使用 window 这个前缀。

示例:

txt = "

Browser CodeName: " + navigator.appCodeName + "

";

txt+= "

Browser Name: " + navigator.appName + "

";

txt+= "

Browser Version: " + navigator.appVersion + "

";

txt+= "

Cookies Enabled: " + navigator.cookieEnabled + "

";

txt+= "

Platform: " + navigator.platform + "

";

txt+= "

User-agent header: " + navigator.userAgent + "

";

本文由金沙官网线上发布于Web前端,转载请注明出处:js5【金沙官网线上】-bom

您可能还会对下面的文章感兴趣: