ECMAScript是JavaScript的核心,BOM是javascript在浏览器应用中的核心;
BOM 对象包括:
1、window
2、location
3、navigator
4、screen
5、history
1、window
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestBOMWindow.aspx.cs" Inherits="TestWebButton.JavaScript.TestFrame" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
/* 获得浏览器的宽度和高度 */
var pageWidth = window.innerWidth;
var 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;
}
}
//alert("pageWidth : " + pageWidth + " pageHeight : " + pageHeight)
/* 弹出窗口 和 关闭窗口 */
var wrox = window.open("http://www.baidu.com", "topFrame", "height=400,width=400,top=10,left=10");
var i = 1;
//var funId = setInterval(function () { alert(i++); }, 1000);//间断执行
//setInterval(function () { clearInterval(funId); }, 2000);//关闭间断执行
setTimeout(function () { wrox.close(); }, 5000); //超时执行
/* 系统对话框[alert()、confirm()、prompt()] */
var result = null;
while (result == null) {
result = prompt("你叫什么名字?", "");
if (result != null ) {
alert(result + " 你好 !");
}
}
</script>
</head>
<body>
</body>
</html>
2、Location 访问地址对象
window.open 用来打开新窗口
window.location 用来替换当前页,也就是重新定位当前页
我们可以用以下来个实例来测试一下。
<input type="button" value="新窗口打开" οnclick="window.open('http://www.zhousl.com/')">
<input type="button" value="当前页打开" οnclick="window.location='http://www.zhousl.com/'">
3、Navigator
window.navigator.platform window.navigator.appCodeName window.navigator.appName("Netscape" for mozilla,"Microsoft Internet Explorer" for IE] window.navigator.appVersion window.navigator.language (mozilla) window.navigator.userLanguage (IE) window.navigator.mimeTypes window.navigator.plugins (different in IE and mozilla) window.navigator.userAgent window.navigator.cookieEnabled
4、Screen Js的屏幕对象
<html>
<head>
<title>screen屏幕对象用法</title>
</head>
<body>
<script type="text/javascript">
document.write("width:" + screen.width + "<br>");
//返回屏幕的宽度(像素数)。
document.write("height:" + screen.height + "<br>");
//返回屏幕的高度。
document.write("availWidth:" + screen.availWidth + "<br>");
//返回屏幕的可用宽度(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度)
document.write("availHeight:" + screen.availHeight + "<br>");
//返回屏幕的可用宽度(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度)
document.write("colorDepth:" + screen.colorDepth + "<br>")
//返回当前颜色设置所用的位数 - 1:黑白;8:256色;16:增强色;24/32:真彩色
</script>
</body>
</html>
5、History
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。
IE: Internet Explorer, F: Firefox, O: Opera.
History 对象属性
属性 | 描述 | IE | F | O |
---|---|---|---|---|
length | 返回浏览器历史列表中的 URL 数量。 | 4 | 1 | 9 |
History 对象方法
方法 | 描述 | IE | F | O |
---|---|---|---|---|
back() | 加载 history 列表中的前一个 URL。 | 4 | 1 | 9 |
forward() | 加载 history 列表中的下一个 URL。 | 4 | 1 | 9 |
go() | 加载 history 列表中的某个具体页面。 | 4 | 1 | 9 |