一、Window对象

1.简介

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

所有的JS全局对象、函数、变量都自动成为window对象的成员。所以全局变量是window对象的属性，全局函数是window对象的方法。

2.要点

1)window对象本身

2)window获得浏览器尺寸

3)window提供的与浏览器有关的方法


3.示例

1)window对象和浏览器尺寸


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">

</head>
<body>
    <p id="p1"></p>
    <button οnclick="openAWindow()">打开新窗口</button>
    <button οnclick="closeAWindow()">关闭当前窗口</button>
    <!-- 将js代码放在body中，这样在页面加载的时候会执行js代码 -->
    <script type="text/javascript">
/**
 * 1.window对象
 */
   window.document.getElementById("p1");
   document.getElementById("p1");

/**
*2.window尺寸
*/
	/**
	*  1)浏览器内部尺寸
	*/
    //支持safari/chrome/ie9/opera/firefox
	var width1 = window.innerWidth;
	var height1 = window.innerHeight;
	//ie8、ie7、ie6...方式一
	var width2 =document.documentElement.clientWidth;
	var height2= document.documentElement.clientHeight;
    //ie8、ie7、ie6...方式二
    var width3 = document.body.clientWidth;
    var height3 = document.body.clientHeight;

    //alert(width1+"*" + height1);//1280*909
</script>
</body>

</html>



2)window方法


window.open() - 打开新窗口

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

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

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

window.open();//打开空白页
window.open("http://www.baidu.com");




二、Screen对象

1.简介

该对象可以获得用户所使用的显示器的尺寸信息。

2.作用

显示器的实际尺寸。

显示器的可用尺寸，即实际尺寸减去串口特性如任务栏等。

3.实例代码


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta content="text/css" charset="utf-8">
    </head>
    <body>
        <script type="text/javascript">
        var x1 = screen.availWidth;//电脑屏幕的可用尺寸，减去窗口特性如底部的任务栏等
        var y1 = screen.availHeight;
        var x2 = screen.width;
        var y2 = screen.height;

        document.write(x1+"*"+y1+"<br/>");//1280*994
        document.write(x2+"*"+y2+"<br/>");//1280*1024
        </script>
    </body>
</html>




三、Location对象

1.简介

用于获取当前页面的一些内容，或重新定向到新的页面。

2.示例


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
<script type="text/javascript">
function loadDoc(){
	location.assign("http://www.baidu.com");//加载新的文档
}
function getUrl(){
	 var x1 = location.href;//返回当前页面的url
     var x2 = location.pathname;//返回当前页面的路径和文件名
     var x3 = location.port;//返回主机端口
     var x4 = location.hostname;//返回主机域名
     var  x5 = location.protocol;//返回页面协议
     document.write(x1+"<br/>"+x2+"<br/>"+x3+"<br/>"+x4+"<br/>"+x5);
}
</script>
</head>
<body>
	<button οnclick="getUrl()">返回页面信息</button>
	<button οnclick="loadDoc()">加载页面</button>
</body>
</html>



四、History对象

1.简介

该对象包含浏览器的历史，使用该对象可以实现浏览器中前进和后退的功能。

2.示例

window-04.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
<script>
function goForward(){
    history.forward();
 }
</script>
</head>
<body>
	<a href="http://localhost/w3c/window-05.php">window05.php</a>
	<button οnclick="goForward()">前进</button>
</body>
</html>



window-05.php


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
<script>
function goBack(){
    history.back();
}

</script>
</head>
<body>
	<a href="http://localhost/w3c/window-04.php">window04.php</a>
	<button οnclick="goBack()">返回</button>
</body>
</html>




五、Navigator对象

1.简介

获取访问者的浏览器的相关信息。

2.缺点

navigator数据可以被浏览器使用者修改，浏览器无法映射晚于浏览器发布的操作系统。所以该对象最好不用于检测浏览器的版本。

如果要做浏览器的检测，可以使用相应的对象来检测浏览器的版本。不同的浏览器支持不同的对象，如chrome支持window.chrome，opera支持window.opera...

3.示例


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

<script>
//当然还有其他的浏览器识别等,这里仅列出2种
if(window.chrome){  //识别chrome浏览器，只有浏览器为chome时，才会执行
	document.write("chrome");
}
if(window.opera){
	document.write("opera");
}



var 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>



执行效果

javascript中window对象 js中window的对象_对象


六、PopupAlert对象

1.简介

包含三种对话框：警告框(alert)、确认框(confirm)、提示框(prompt)

警告框：只有点击了确认才能继续操作。

确认框：用于验证和接受某些消息，确认就继续，取消不操作。

提示框：进入对话框页面输入信息，确认就继续，取消不操作。

2.示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
        function dialog1(){
            alert("警告对话框");
        }
        function dialog2(){
            confirm("是否确认？");
        }
        function dialog3(){
            prompt("提示输入信息");
        }
        </script>
    </head>
    <body>
        <button onClick="dialog1()">警告对话框</button>
        <button onClick="dialog2()">确认对话框</button>
        <button onClick="dialog3()">提示对话框</button>
    </body>
</html>


javascript中window对象 js中window的对象_对象_02



javascript中window对象 js中window的对象_javascript_03

javascript中window对象 js中window的对象_javascript_04

七、Timing对象

1.简介

可以实现计时事件，在一段时间后执行某段代码。

2.示例

<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }

function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>

<body>
	<form>
		<input type="button" value="Start count!" onClick="timedCount()">
		<input type="text" id="txt">
	    <input type="button" value="Stop count!" onClick="stopCount()">
	</form>
</body>

</html>



八、Cookie对象

1.简介

cookie用来识别用户。

cookie是存储在访问者计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。你可以通过js创建和取回。

2.示例

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
    //获得cookie信息
        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                var c_start = document.cookie.indexOf(c_name + "=");
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1;
                    var c_end = document.cookie.indexOf(";", c_start);
                    if (c_end == -1) {
                        c_end = document.cookie.length;
                    }
                    //将解码的字符串返回
//                    return unescape(document.cookie.substring(c_start, c_end));
                    return decodeURIComponent(document.cookie.substring(c_start, c_end));
                }
            }
            return ""
        }
        //设置cookie格式，保存cookie信息
        //cookie格式为：username=xxx;expires=xxx
        function setCookie(c_name, value, expiredays) {
            var exdate = new Date();//获得当前日期
            exdate.setDate(exdate.getDate() + expiredays);//将日期对象设置为cookie失效的时间
            //escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
//            document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
            document.cookie = c_name + "=" + decodeURI(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
        }

        function checkCookie() {
            var username = getCookie('username');
            if (username != null && username != "") {
                alert('Welcome again ' + username + '!');
            } else {
                username = prompt('Please enter your name:', "");
                if (username != null && username != "") {
                    setCookie('username', username, 365);
                }
            }
        }
    </script>
</head>
<body onLoad="checkCookie()">
</body>
</html>