澳门新葡萄京官网首页原生js学习笔记5——BOM操作

如果你是一个SitePoint的老读者并且是我的粉丝的话,那么你已经知道我写了很多关于HTML5以及JS
API的文章。到目前为止,我已经发布了一些介绍你现在就可以马上使用的API,尽管可能会用到polyfill的方式。(译注:不知道什么是polyfill请点击这里。)

什么是BOM

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

但是今天我可能要打破这个常规来给大家介绍一些仍然还处在初期阶段的API。大家必须知道这些API是非常新的,在这三个里面有两个都是在几天之前刚刚发布的。正因如此,这些API现目前都还无法使用。但是如果你有兴趣了解它们具体是用来做什么的,你可以继续阅读下面关于它们的详细介绍,同时也欢迎留下你的看法和回应。

目前主流浏览器介绍

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

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

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

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

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

废话不多说,现在开始!

可以操作的BOM对象

Web Alarms API

Web Alarms
API让你可以配置设备的闹铃设置,从而能够安排通知消息或让某个特定的应用在指定的时间点启动。这个API最典型的用法会涉及到像闹钟,日历,或其他任何需要在特定时间进行特定操作的程序。

自从去年开始,这个API刚刚成为了一个W3C的设计草案。因此所有有待成为W3C官方推荐的相关细节都还在初期阶段。这个API需要通过window.navigator对象下的alarms属性来使用。alarms属性会提供三个函数:

  • getAll(): 从设备获取全部已有的闹铃并以包含Alarm对象的数组形式返回。
  • add(): 注册一个基于Date对象的闹铃并返回一个AlarmRequest对象。
  • remove(): 通过唯一ID移除一个之前注册的闹铃(唯一性仅针对应用本身)

为了向大家演示理想情况下这些函数应当如何使用,这里有一个添加闹铃的例子(请记住现目前任何浏览器都不支持这段代码)

var alarmId;
var request = navigator.alarms.add(
    new Date("June 29, 2012 07:30:00"),
    "respectTimezone",
);

request.onsuccess = function (e) {
    alarmId = e.target.result;
};

request.onerror = function (e) {
    alert(e.target.error.name);
};

如果你想要了解更多关于Web Alarms
API,请参阅相关细节文档。

window对象

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

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

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

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

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

window.document.getElementById("header");

与此相同:

document.getElementById("header");

Presentation API

Presentation
API的目标就是让投影仪或TV这样的第二显示设备能够被Web使用,包括所有通过有线(HDMI,DVI等)连接以及通过无线(MiraCast,
Chromecast, DLNA,
AirPlay等)的设备。这个API所做的就是在请求页面与第二显示设备上的演示页面之间实现消息互通。

请注意该API细节并不属于W3C标准,也不在W3C标准计划当中。这个API需要通过window.navigator对象下的presentation属性来使用。该属性提供了一个叫requestSession()函数,以及present和availablechange两个事件。requestSession()函数可以用来启动或恢复第二显示设备上的演示。它会返回一个session对象指代当前的演示。当通过requestSession()传入的url里面的演示内容被加载完成后,演示屏幕的页面会收到present事件。最后,在第一张演示出现后或者最后一张演示完成后会发出availablechange事件。

举个例子,来自细节文档,该API的用法如下所示:

<button disabled>Show</button>

<script>
var presentation = navigator.presentation,
    showButton = document.querySelector('button');

presentation.onavailablechange = function(e) {
  showButton.disabled = !e.available;
  showButton.onclick = show;
};

function show() {
  var session = presentation.requestSession('http://example.org/');

  session.onstatechange = function() {
    switch (session.state) {
      case 'connected':
        session.postMessage(/*...*/);
        session.onmessage = function() { /*...*/ };
        break;
      case 'disconnected':
        console.log('Disconnected.');
        break;
    }
  };
}
</script>

如果你想要了解更多关于Presentation
API的消息,可以看看最终报告。

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 方案(涵盖所有浏览器):

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
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 + "。"
</script>

</body>
</html>

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

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

Standby API

Standby
API让你可以在顶层浏览器页面中请求屏幕持续显示锁。这可以防止设备进入省电状态(例如屏幕自动关闭)。这个功能对有些web应用来说至关重要。例如,想像一下你正在驾车并在手机上使用基于web的导航软件(非本地应用)。如果你不去触碰屏幕的话,你的手机的屏幕会自动关闭,除非你事前在手机上进行过相关的设置。在这样的情况下,通常你是想要让屏幕保持显示状态的。这恰恰是这个API适用的地方。

这个API需要通过window.navigator对象下的wakeLock属性来使用。它会提供两个函数:

  • request(): 使当前应用能让屏幕保持显示状态。
  • release(): 释放持续显示锁,这样屏幕就不会再被强制要求显示。
    这两个函数都只接受一个参数,其只能是“screen”或“system”。前者表示操作针对的是设备屏幕,而后者针对的是除屏幕之外如CPU或广播之类的其他设备资源。

以下例子会演示如何适用该API让设备屏幕保持显示状态:

navigator.wakeLock.request("display").then(
    function successFunction() {
        // do something
    },
    function errorFunction() {
        // do something else
    }
);

要让设备允许屏幕关闭,我们可以用以下方法:

navigator.wakeLock.release("display");

如果你想要了解关于Standby
API的更多信息,可以参考这个非官方草案。

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

  • window.open() – 打开新窗口
  • window.close() – 关闭当前窗口
  • window.moveTo() – 移动当前窗口
  • window.resizeTo() – 调整当前窗口的尺寸

总结

在这篇文章里我给大家介绍了一些崭新的JS
API。我要再次强调因为它们都还处在非常早期的阶段,所以目前没有浏览器支持。因此我们也没法实际地操作它们。然而正因为它们如此之新大家现在都有机会跟进它们接下来的发展甚至参与帮助它们的细节设计的完善。

Web开发的未来一片光明,加入进来吧!

navigator

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

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

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

示例:

<!DOCTYPE html>
<html>
<body>
<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

</body>
</html>

注意

来自 navigator
对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator 数据可被浏览器使用者更改
  • 浏览器无法报告晚于浏览器发布的新操作系统

screen

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

  • screen.width:屏幕宽度,以像素为单位;
  • screen.availWidth:屏幕的可用宽度,以像素为单位
  • screen.height:屏幕高度,以像素为单位;
  • screen.availHeight:屏幕的可用高度,以像素为单位
  • screen.colorDepth:返回颜色位数,如8、16、24。

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

<script type="text/javascript">
document.write( "屏幕宽度:"+screen.width+"px<br />" );
document.write( "屏幕高度:"+screen.height+"px<br />" );
document.write( "屏幕可用宽度:"+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度:"+screen.availHeight+"px" );
</script>

Location

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

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

可以用location.href获取:

<script>

document.write(location.href);

</script>

要获得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()方法非常方便。

示例:加载一个新页面

<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3school.com.cn")
 }
</script>
</head>
<body>

<input type="button" value="加载新文档" onclick="newDoc()">

</body>
</html>

History

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

History Back

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的:

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

History Forward

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的:

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

注意

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

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

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

拓展

系统对话框

  • alert()警告框,没有返回值
  • confirm('提问的内容')返回boolean
  • prompt(),输入框,返回字符串或null

window对象常用事件

  • onload:当页面加载时
  • onscroll:当页面滚动时
  • onresize:页面重新定义大小时

发表评论

电子邮件地址不会被公开。 必填项已用*标注