Window
1.Window对象
-
所有浏览器都支持 window 对象。它代表浏览器的窗口。
-
所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
-
全局变量是 window 对象的属性。
-
全局函数是 window 对象的方法。
甚至(HTML DOM 的)document 对象也是 window 对象属性:
window.document.getElementById("header");
等同于:
document.getElementById("header");
2.窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸:
- window.innerHeight - 浏览器窗口的内高度(以像素计)
- window.innerWidth - 浏览器窗口的内宽度(以像素计)
浏览器窗口(浏览器视口)不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或
- document.body.clientHeight
- document.body.clientWidth
一个实用的 JavaScript 解决方案(包括所有浏览器):
实例:
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
该例显示浏览器窗口的高度和宽度:(不包括工具栏和滚动条)
3.其他窗口方法
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
Screen
window.screen 对象包含用户屏幕的信息。
window.screen 对象不带 window 前缀也可以写:
属性:
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
1. 宽度
screen.width
属性返回以像素计的访问者屏幕宽度。
实例
显示以像素计的屏幕宽度:
document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;
结果将是:
Screen Width: 1536
2. 高度
screen.height
属性返回以像素计的访问者屏幕的高度。
实例
显示以像素计的屏幕高度:
document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;
结果将是:
Screen Height: 864
3. 可用宽度
screen.availWidth
属性返回访问者屏幕的宽度,以像素计,减去诸如窗口工具条之类的界面特征。
实例
显示以像素计的屏幕可用宽度:
document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;
结果将是:
Available Screen Width: 1536
4. 可用高度
screen.availHeight
属性返回访问者屏幕的高度,以像素计,减去诸如窗口工具条之类的界面特征。
实例
显示以像素计的屏幕可用高度:
document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;
结果将是:
Available Screen Height: 832
5. 色深
screen.colorDepth
属性返回用于显示一种颜色的比特数。
所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率:
-
24 bits =16,777,216 种不同的 “True Colors”
-
32 bits = 4,294,967,296 中不同的 “Deep Colors”
-
更老的计算机使用 14 位:65,536 种不同的 “High Colors” 分辨率。
-
异常古老的计算机,以及老式的手机使用 8 位:256 中不同的 “VGA colors”。
实例
显示以位计的屏幕色彩深度:
document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;
结果将是:
Screen Color Depth: 24
HTML 中使用的 #rrggbb (rgb) 值代表 “True Colors” (16,777,216 中不同的颜色)。
6. 像素深度
screen.pixelDepth
属性返回屏幕的像素深度。
实例
显示以位计的屏幕像素深度:
document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;
结果将是:
Screen Pixel Depth: 24
对于现代计算机,颜色深度和像素深度是相等的。
Location
window.location 对象可用于获取当前页面地址(URL)并把浏览器重定向到新页面。
window.location 对象可不带 window 前缀书写。
一些例子:
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议(http: 或 https:)
- window.location.assign 加载新文档
1. Window Location Href
window.location.href
属性返回当前页面的 URL。
实例
显示当前页面的 href (URL):
document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;
结果是:
页面位置是 http://www.w3school.com.cn/js/js_window_location.asp
2. Window Location 主机名
window.location.hostname
属性返回(当前页面的)因特网主机的名称。
实例
显示主机的名称:
document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;
结果是:
页面主机名是 www.w3school.com.cn
3. Window Location 路径名
window.location.pathname
属性返回当前页面的路径名。
实例
显示当前 URL 的路径名:
document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;
结果是:
页面路径是 /js/js_window_location.asp
4. Window Location 协议
window.location.protocol
属性返回页面的 web 协议。
实例
显示 web 协议:
document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;
结果是:
页面协议是 http:
5. Window Location 端口
window.location.port
属性返回(当前页面的)互联网主机端口的编号。
实例
显示主机的端口号:
document.getElementById("demo").innerHTML = "端口号是: " + window.location.port;
6. Window Location Assign
window.location.assign()
方法加载新文档。
实例
加载新文档:
<html>
<head>
<script>
function newDoc() {
window.location.assign("https://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
History
window.history 对象包含浏览器历史。
window.history
对象可不带 window 书写。
为了保护用户的隐私,JavaScript 访问此对象存在限制。
一些方法:
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
1. Window 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>
以上代码的输出将是:
2. Window 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>
以上代码的输出将是:
Navigator
window.navigator 对象包含有关访问者的信息。
window.navigator 对象可以不带 window 前缀来写。
一些例子:
- navigator.cookieEnabled
- navigator.appName
- navigator.appCodeName
- navigator.product
- navigator.appVersion
- navigator.userAgent
- navigator.platform
- navigator.language
- navigator.onLine
- navigator.javaEnabled()
1. 浏览器 Cookie
cookieEnabled
属性返回 true,如果 cookie 已启用,否则返回 false:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>
2. 浏览器应用程序名称
appName
属性返回浏览器的应用程序名称:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>
3. 浏览器应用程序代码名称
appCodeName
属性返回浏览器的应用程序代码名称:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>
4. 浏览器引擎
product
属性返回浏览器引擎的产品名称
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
</script>
5. 浏览器版本
appVersion
属性返回有关浏览器的版本信息:
实例
<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>
6. 浏览器代理
userAgent
属性返回由浏览器发送到服务器的用户代理报头(user-agent header):
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.userAgent;
</script>
警告!!!
来自 navigator 对象的信息通常是误导性的,不应该用于检测浏览器版本,因为:
- 不同浏览器能够使用相同名称
- 导航数据可被浏览器拥有者更改
- 某些浏览器会错误标识自身以绕过站点测试
- 浏览器无法报告发布晚于浏览器的新操作系统
7. 浏览器平台
platform
属性返回浏览器平台(操作系统):
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.platform;
</script>
8. 浏览器语言
language
属性返回浏览器语言:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>
9. 浏览器是否在线?
onLine
属性返回 true,假如浏览器在线:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.onLine;
</script>
10. Java 是否启用?
javaEnabled()
方法返回 true,如果 Java 已启用:
实例
<script>
document.getElementById("demo").innerHTML = navigator.javaEnabled();
</script>
弹出框
JavaScript 有三种类型的弹出框:
- 警告框
- 确认框
- 提示框
1. 警告框
如果要确保信息传递给用户,通常会使用警告框。
当警告框弹出时,用户将需要单击“确定”来继续。
语法
window.alert("sometext");
window.alert()
方法可以不带 window
前缀来写。
实例
alert("我是一个警告框!");
2. 确认框
如果您希望用户验证或接受某个东西,则通常使用“确认”框。
当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”,该框返回 true
。如果用户单击“取消”,该框返回 false
。
语法
window.confirm("sometext");
window.confirm()
方法可以不带 window
前缀来编写。
实例
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
3. 提示框
如果您希望用户在进入页面前输入值,通常会使用提示框。
当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL
。
语法
window.prompt("sometext","defaultText");
window.prompt()
方法可以不带 window
前缀来编写。
实例
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "!今天过的怎么样?";
}
4. 折行
如需在弹出框中显示折行,请在反斜杠后面加一个字符 n
。
实例
alert("Hello\nHow are you?");
Timing
JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件( Timing Events)。
通过 JavaScript 使用的有两个关键的方法:
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。setInterval(function, milliseconds)
等同于 setTimeout(),但持续重复执行该函数。
setTimeout()
和 setInterval()
都属于 HTML DOM Window 对象的方法。
1. setTimeout() 方法
window.setTimeout(function, milliseconds);
window.setTimeout()
方法可以不带 window
前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
实例
单击按钮。等待 3 秒,然后页面会提示 “Hello”:
<button onclick="setTimeout(myFunction, 3000)">试一试</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
如何停止执行?
clearTimeout()
方法停止执行 setTimeout()
中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout()
方法可以不带 window
前缀来写。
clearTimeout()
使用从 setTimeout()
返回的变量:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
实例
类似上例,但是添加了“停止”按钮:
<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>
<button onclick="clearTimeout(myVar)">停止执行</button>
2. setInterval() 方法
setInterval()
方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval()
方法可以不带 window
前缀来写。
-
第一个参数是要执行的函数。
-
第二个参数每个执行之间的时间间隔的长度。
本例每秒执行一次函数 “myTimer”(就像数字手表)。
实例
显示当前时间:
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
如何停止执行?
clearInterval()
方法停止 setInterval()
方法中指定的函数的执行。
window.clearInterval(timerVariable)
window.clearInterval()
方法可以不带 window
前缀来写。
clearInterval()
方法使用从 setInterval()
返回的变量:
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
实例
类似上例,但是我们添加了一个“停止时间”按钮:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">停止时间</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
更多实例
另一个简单的计时
由计时时间创建的时钟
Cookies
Cookie 让您在网页中存储用户信息。
什么是 cookie?
Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的:
- 当用户访问网页时,他的名字可以存储在 cookie 中。
- 下次用户访问该页面时,cookie 会“记住”他的名字。
Cookie 保存在名称值对中,如:
username = Bill Gates
当浏览器从服务器请求一个网页时,将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
如果浏览器已关闭本地 cookie 支持,则以下实例均无法工作。
1. 通过 JavaScript 创建 cookie
JavaScript 可以用 document.cookie
属性创建、读取、删除 cookie。
通过 JavaScript,可以这样创建 cookie:
document.cookie = "username=Bill Gates";
您还可以添加有效日期(UTC 时间)。默认情况下,在浏览器关闭时会删除 cookie:
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
通过 path
参数,您可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
2. 通过 JavaScript 读取 cookie
通过 JavaScript,可以这样读取 cookie:
var x = document.cookie;
document.cookie
会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2=value; cookie3=value;
3. 通过 JavaScript 改变 cookie
通过使用 JavaScript,你可以像你创建 cookie 一样改变它:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
旧 cookie 被覆盖。
4. 通过 JavaScript 删除 cookie
删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值:
直接把 expires
参数设置为过去的日期即可:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径,一些浏览器不会让你删除 cookie。
5. Cookie 字符串
document.cookie
属性看起来像一个正常的文本字符串。但它不是。
即使你向 document.cookie
写一份完整的 cookie 字符串,当再次读取时,你只能看到它的名称-值对。
如果设置了新 cookie,则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie,所以如果你读取 document.cookie,你得到的东西会像这样:
cookie1 = value; cookie2 = value;
显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2
如果你想找到一个指定 cookie 的值,你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。
JavaScript Cookie 实例
在下面的示例中,我们将创建一个 cookie 来存储访问者的名称。
访客第一次到达网页时,会要求他填写姓名。然后将该名称存储在 cookie 中。
下次访客到达同一页时,他将收到一条欢迎消息。
例如,我们将创建 3 个JavaScript函数:
- 设置 cookie 值的函数
- 获取 cookie 值的函数
- 检查 cookie 值的函数
1. 设置 cookie 的函数
首先,我们创建一个函数,将访问者的名字存储在 cookie 变量中:
实例
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
例子解释:
上面这个函数的的参数是:cookie 的名字(cname),cookie 的值(cvalue),以及知道 cookie 过期的天数(exdays)。
通过把 cookie 名称、cookie 值和过期字符串相加,该函数就设置了 cookie。
2. 获取 cookie 的函数
然后,我们创建一个函数返回指定 cookie 的值:
实例
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
函数解释:
把 cookie 作为参数(cname)。
创建变量(name)与要搜索的文本(CNAME”=”)。
解码 cookie 字符串,处理带有特殊字符的 cookie,例如 “$”。
用分号把 document.cookie 拆分到名为 ca(decodedCookie.split(’;’))的数组中。
遍历 ca 数组(i = 0; i < ca.length; i++),然后读出每个值 c = ca[i]。
如果找到 cookie(c.indexOf(name) == 0),则返回该 cookie 的值(c.substring(name.length, c.length)。
如果未找到 cookie,则返回 “”。
3. 检测 cookie 的函数
最后,我们创建检查 cookie 是否设置的函数。
如果已设置 cookie,将显示一个问候。
如果未设置 cookie,会显示一个提示框,询问用户的名字,并存储用户名 cookie 365 天,通过调用 setCookie
函数:
实例
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
4. 现在组合起来
实例
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
上面的例子会在页面加载后运行 checkCookie() 函数。