JS 笔记--BOM

Sincelily

2013-02-21

关注关注

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="新窗口打开" onclick="window.open('http://www.zhousl.com/')">
<input type="button" value="当前页打开" onclick="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 对象属性

length	返回浏览器历史列表中的 URL 数量。	4	1	9

length

返回浏览器历史列表中的 URL 数量。

History 对象方法

back()	加载 history 列表中的前一个 URL。	4	1	9
forward()	加载 history 列表中的下一个 URL。	4	1	9
go()	加载 history 列表中的某个具体页面。	4	1	9