JS window对象详解

  • 1.window对象
  • 2.窗口操作
  • 打开窗口
  • 关闭窗口
  • 3.对话框
  • confirm
  • prompt
  • 4.定时器
  • setTimeout和clearTimeout
  • setInterval和clearInterval
  • 5.location对象
  • window.location.href
  • window.location.search
  • window.location.hash
  • 6.navigator对象


1.window对象

在JavaScript中，一个浏览器窗口就是一个window对象

window对象存放了这个页面的所有信息，为了更好地分类处理这些信息，window对象下面又分为很多对象

javascript获取到mac js获取window_前端

javascript获取到mac js获取window_开发语言_02

window对象及下面这些location、navigator等子对象，由于都是用于操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）

window对象的常用方法：

javascript获取到mac js获取window_开发语言_03

2.窗口操作

打开窗口

在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口

语法：

window.open(url,target)

url指的是新窗口的地址

target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank（默认）和_self

案例：点击按钮打开百度网：

window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		window.open("https://www.baidu.com/");
	};
}

关闭窗口

在JavaScript中，我们可以使用window.close()来关闭一个新窗口

window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		window.close();
	};
}

3.对话框

在JavaScript中，对话框有3种：

alert()、confirm()、prompt()

alert()很简单，这里就不多介绍了

confirm

在JavaScript中，confirm()对话框不仅提示文字，还提供确认

如果用户点击【确定】按钮，会返回true；如果用户点击【取消】按钮，则会返回false

window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		confirm("确定吗？");
	};
}

输出如下：

javascript获取到mac js获取window_javascript获取到mac_04

prompt

在JavaScript中，prompt()对话框不仅会提示文字，还会返回一个字符串

window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		var name = prompt("你的名字？");
		document.write(name);
	};
}

javascript获取到mac js获取window_前端_05

在弹出的对话框中，有一个输入文本框。输入内容，然后点击对话框中的【确定】按钮，就会返回刚刚输入的文本

4.定时器

所谓的“定时器”，指的是每隔一段时间就执行一次代码。在JavaScript中，对于定时器的实现，有以下两组方法。

setTimeout(),clearTimeout(),setInterval(),clearInterval()

setTimeout和clearTimeout

在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()

语法：

setTimeout(code,time);
  • 参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
  • 参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

2秒提示欢迎语：

window.onload = function() {
	setTimeout("alert('欢迎');",2000);
}

clearTimeout取消执行setTimeout：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
         div{width:100px;height:100px;border:1px solid silver;}
    </style>
    <script>
         window.onload=function()
         {
             // 获取元素
             var oBtn=document.getElementsByTagName("input");
             // timer存放定时器
             var timer=null;
             oBtn[0].onclick=function()
             {
                timer=setTimeout(function(){
                   alert("欢迎来到绿叶学习网");
                },2000);
             };
             oBtn[1].onclick=function()
             {
                clearTimeout(timer);
             };
        }
  </script>
</head>
<body>
  <p>点击"开始"按钮，2秒后提示欢迎语。</p>
  <input type="button" value="开始"/>
  <input type="button" value="暂停"/>
</body>
</html>

javascript获取到mac js获取window_window对象_06

如果点击【开始】按钮，2秒后就会弹出对话框。如果在2秒内再次点击【暂停】按钮，就不会弹出对话框

setInterval和clearInterval

在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()

案例：实现页面倒计时：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEXT</title>
    <script src="js/index.js"></script>
</head>
<body>
    倒计时：<div id="num">5</div>
</body>
</html>
var n = 5;

window.onload = function() {
	setInterval(countDown,1000);
}

function countDown() {
	if (n > 0) {
		n--;
		document.getElementById("num").innerHTML = n;
	}
}

javascript获取到mac js获取window_window对象_07

案例：实现控制div块变色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEXT</title>
    <script src="js/index.js"></script>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <input type="button" value="开始"/>
    <input type="button" value="暂停"/>
    <div></div>
</body>
</html>
window.onload = function() {
	var oBtn = document.getElementsByTagName("input");
	var oDiv = document.getElementsByTagName("div")[0];
	var colors = ["red","blue","orange","yellow","purple","green"];
	// 定义定时器
	var timer = null;
	var i = 0;
	oBtn[0].onclick = function() {
		timer = setInterval(function() {
			oDiv.style.backgroundColor = colors[i];
			i++;
			i = i % colors.length;
		},1000);
	};
	oBtn[1].onclick = function() {
		clearInterval(timer);
	}
}

javascript获取到mac js获取window_开发语言_08

当我们点击【开始】按钮后，div元素每隔一秒就会切换一次背景颜色。当我们点击【暂停】按钮后，就会停止切换

其实每点击一次，都会新开一个setInterval()，如果你不断点击按钮，setInterval()就会累加起来。也就是说，当你点击3次按钮时，其实已经开了3个setInterval()，此时如果想要停下来，就必须点击3次【暂停】按钮。为了避免产生这个累加的bug，我们在每次点击【开始】按钮时就要清除一次定时器，改进后的代码如下:

window.onload = function() {
	var oBtn = document.getElementsByTagName("input");
	var oDiv = document.getElementsByTagName("div")[0];
	var colors = ["red","blue","orange","yellow","purple","green"];
	// 定义定时器
	var timer = null;
	var i = 0;
	oBtn[0].onclick = function() {
		clearInterval(timer);
		timer = setInterval(function() {
			oDiv.style.backgroundColor = colors[i];
			i++;
			i = i % colors.length;
		},1000);
	};
	oBtn[1].onclick = function() {
		clearInterval(timer);
	}
}

5.location对象

在JavaScript中，我们可以使用window对象下的location子对象来操作当前窗口的URL

javascript获取到mac js获取window_开发语言_09

window.location.href

在JavaScript中，我们可以使用location对象的href属性来获取或设置当前页面的地址

window.onload = function() {
	var url = window.location.href;
	document.write("当前页面地址：" + url);
}

javascript获取到mac js获取window_开发语言_10

设置当前页面地址：

setTimeout(function() {
	window.location.href = "https://www.baidu.com/";
},2000);

window.location.search

在JavaScript中，我们可以使用location对象的search属性来获取和设置当前页面地址“?”后面的内容

window.location.hash

在JavaScript中，我们可以使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容

6.navigator对象

在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型

alert(window.navigator.userAgent);

如下是Chrome的浏览器提示：

javascript获取到mac js获取window_开发语言_11