这一章的内容是,基于第二十八章[在浏览器中使用Javascript的基础]之上,对于javascript在浏览器中的使用方法进行进一步的讲解。
目录
29-1 获取当前页面的URL(location.href)
29-2 加载并显示指定URL的页面(location.assign, location.replace)
29-3 重新加载当前页面(location.reload)
29-4 在浏览器历史记录中前进和后退 (history.back,history.forward.history.go)
29-5 获取用户代理(navigator.userAgent)
29-6 获取显示器的屏幕尺寸和颜色信息(screen.width、screen.height等)
29-7 获取网页的最后更新日期和字符编码(document.characterSet等)
29-8 写入和读取 cookie (document.cookie)
29-9 可以在 cookie 中指定的属性类型以及如何设置它们
可以通过引用 windows.location 对象的 href 属性来引用当前显示的网页的 URL。通过引用其他位置对象属性,可以仅检索 URL 中包含的部分信息,例如主机名、协议和查询字符串。在这里我们将看到如何使用 JavaScript 获取当前页面的 URL。
获取有关URL的信息
通过引用 window.location 对象提供的各种属性,可以查询当前显示网页的 URL 信息。
location.href URL全体
location.protocol URL协议
location.host URL主机名(包括端口号
location.hostname URL主机名
location.port URL端口号
location.pathname URL的路径部分
location.search URL的查询字符串
location.hash URL的锚定部分
您可以通过引用 location.href 属性获取整个 URL,但您也可以通过引用其他属性来获取有关构成 URL 的各个部分的信息。
关于端口号,如果在浏览器地址栏中省略端口号,则无法获取。例如,即使您明确指定 80 或 443,根据浏览器的不同,也可能会省略显示。在这种情况下,引用 location.port 将导致空字符串。
例如URL如下,location对象的各个属性可以引用的值请参考下图。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p>获取当前页面的URL信息[location.href]</p>
<input type="button" value="check" id="btnCheck">
<script>
let btnCheck = document.getElementById('btnCheck');
btnCheck.addEventListener('click', function(){
console.log('href:' + location.href);
console.log('protocol:' + location.protocol);
console.log('host:' + location.host);
console.log('hostname:' + location.hostname);
console.log('port:' + location.port);
console.log('pathname:' + location.pathname);
console.log('search:' + location.search);
console.log('hash:' + location.hash);
});
</script>
</body>
</html>
当您单击屏幕上显示的按钮时,它会将有关当前打开页面的 URL 的信息输出到控制台。
当执行 windows.location 对象的 assign 方法或 replace 方法时,将加载并显示具有参数中指定的 URL 的页面。这两种方法的区别在于,assign 方法将当前页面保留在历史记录中,而 replace 方法则不会。在这里,我将解释如何使用 JavaScript 加载和显示指定 URL 的页面。
如何使用 location.assign 和 location.replace 方法
当你执行 window.location 对象提供的 assign 方法时,将加载并显示参数中指定 URL 的页面。格式如下。
location.assign(newurl)
使用第一个参数中指定的 URL 加载并显示页面。
此外,如果执行 window.location 对象提供的 replace 方法,将加载并显示参数中指定的 URL 的页面。格式如下。
location.replace(newurl)
使用第一个参数中指定的 URL 加载并显示页面。
assign 方法和 replace 方法的区别在于,assign 方法在浏览器历史记录中加载具有指定 URL 的页面之前保存当前页面,然后加载并显示具有新 URL 的页面,而 replace 方法由于当前页面被具有新 URL 的页面替换并显示,当前页面不会保留在浏览器的历史记录中。因此,显示新页面后,您无法使用浏览器的“后退”功能返回原页面。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p>加载并显示指定URL的页面[location.assign,location.replace]。</p>
<input type="button" value="assign" id="btnAssign">
<input type="button" value="replace" id="btnReplace">
<script>
let btnAssign = document.getElementById('btnAssign');
let btnReplace = document.getElementById('btnReplace');
btnAssign.addEventListener('click', function(){
location.assign('./test.html');
});
btnReplace.addEventListener('click', function(){
location.replace('./test.html');
});
</script>
</body>
</html>
单击屏幕上显示的分配按钮时,将执行分配方法并加载并显示参数中指定的 URL 的页面。
在assign方法的情况下,显示新页面之前的页面保留在浏览器历史记录中,因此您可以使用浏览器的“后退”功能返回到原始页面。
单击屏幕上显示的替换按钮时,将执行替换方法并加载并显示参数中指定的 URL 的页面。
在替换方法的情况下,显示新页面之前的页面不会保留在浏览器的历史记录中,因此无法使用浏览器的“后退”功能返回到原始页面。
将新 URL 分配给 location.href 属性
可以通过引用 window.location 对象提供的 href 属性来获取当前页面的 URL,但是如果你给 href 属性赋值一个新的 URL,将会加载并显示指定 URL 的页面。
像这样运行它:
location.href = 'http://www.flashyonder.com/';
通过将 URL 替换为 location 对象,可以获得相同的结果,如下所示。
location = 'http://www.flashyonder.com/';
当加载和显示一个新的 URL 分配给 location.href 属性的页面时,当前页面保留在浏览器的历史记录中,就像使用 location.assign 方法一样。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p>将新URL分配给location.href属性</p>
<input type="button" value="new URL" id="btnHref">
<script>
let btnHref = document.getElementById('btnHref');
btnHref.addEventListener('click', function(){
location = './test.html';
});
</script>
</body>
</html>
当您单击屏幕上显示的新 URL 按钮时,一个新的 URL 将分配给 location.href 属性,并加载并显示具有指定 URL 的页面。
对于 location.href 属性,显示新页面之前的页面保留在浏览器的历史记录中,因此您可以使用浏览器的“后退”功能返回到原始页面。
执行windows.location对象的reload方法,重新加载刷新当前显示的页面。在这里,我们将看到如何使用 JavaScript 重新加载当前页面。
如何使用 location.reload 方法
执行window.location对象提供的reload方法,重新加载当前显示的网页。格式如下。
location.reload()
重新加载不会添加历史记录。当前页面将更新为新内容。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p id="msg">重新加载当前页面location.reload</p>
<input type="button" value="reload" id="btnReload">
<script>
let d = new Date();
let element = document.getElementById('msg');
element.insertAdjacentHTML('afterend', '<p>' + d.toTimeString() + '</p>');
let btnReload = document.getElementById('btnReload');
btnReload.addEventListener('click', function(){
location.reload();
});
</script>
</body>
</html>
单击屏幕上显示的按钮以重新加载当前页面。
windows.history 对象的 back 、 forward 和 go 方法可让您在浏览器的历史记录中前后移动。本文将向您展示如何使用 JavaScript 在浏览器历史记录中来回导航。
如何使用 history.back 和 history.forward 方法
执行 window.history 对象提供的 back 方法返回浏览器历史记录中的一步。格式如下。
history.back()
执行 window.history 对象提供的 forward 方法,使浏览器历史向前移动一步。格式如下。
history.forward()
back方法相当于点击浏览器中的“后退”按钮。forward 方法等同于单击浏览器中的 Forward 按钮。如果没有移动方向的历史,什么都不做。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p>在历史中向前或向后移动。</p>
<input type="button" value="back" id="btnBack">
<input type="button" value="forward" id="btnForward">
<script>
let btnBack = document.getElementById('btnBack');
btnBack.addEventListener('click', function(){
history.back();
});
let btnForward = document.getElementById('btnForward');
btnForward.addEventListener('click', function(){
history.forward();
});
</script>
</body>
</html>
浏览器首先显示 Bing 站点,然后是示例页面,然后是 Google 站点,然后按浏览器的“后退”按钮显示示例页面。
单击屏幕上显示的前进按钮可显示历史记录中的前一页。
使用浏览器的“后退”按钮再次返回示例页面后,单击屏幕上显示的后退按钮将显示历史记录中前一页的页面。
如何使用 history.go 方法
通过执行 window.history 对象提供的 go 方法,您可以在浏览器的历史记录中前进或后退指定为参数的数字。格式如下。
history.go([num])
在可选的第一个参数中指定前进(或后退)历史记录的数字。正数使历史前进,负数使历史倒退。
history.forward() 与 history.go(1) 相同,history.back() 与 history.go(-1) 相同。此外,不带参数的 history.go(0) 或 history.go() 将重新加载当前页面。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p>在历史中向前或向后移动[history.go] 。</p>
<input type="button" value="Previous" id="btnGoback1">
<input type="button" value="PreviousPrevious"" id="btnGoback2">
<script>
let btnGo1 = document.getElementById('btnGoback1');
btnGoback1.addEventListener('click', function(){
history.go(-1);
});
let btnGo2 = document.getElementById('btnGoback2');
btnGoback2.addEventListener('click', function(){
history.go(-2);
});
</script>
</body>
</html>
浏览器如下所示:首先是 Bing 站点,然后是 Google 站点,最后是示例页面。
通过引用windows.navigator对象的userAgent属性,可以得到Uger Agent(用户代理),其中包含访问网页的用户的操作系统、浏览器类型等信息。在这里,我将解释如何使用 JavaScript 获取用户代理。
获取用户代理
可以通过引用 window.navigator 对象提供的 userAgent 属性来获取用户代理。格式如下。
navigator.userAgent
用户代理是一个字符串,包括访问网页的用户的操作系统和所使用的浏览器类型。根据用户是从 PC 还是智能手机访问,在更改显示内容时可能会参考它。
请注意,用户代理可以由用户更改为与实际值不同的值。此外,用户代理将在未来被弃用。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p id="msg">显示用户代理[navigator.userAgent]</p>
<script>
let element = document.getElementById('msg');
element.insertAdjacentHTML('afterend', '<p>' + navigator.userAgent + '</p>');
</script>
</body>
</html>
在浏览器中查看网页时,它会显示用户的用户代理。这次我在 Windows 10(64 位)环境中进行尝试。
对于 Google Chrome 87.0.4280.88,它显示如下。
Microsoft Edge 87.0.664.66 の場合は次のように表示されました。
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.66
iPhone ,Google,Chrome,Safari的显示内容各不相同,请留意。
我们将解释如何使用 JavaScript 获取显示器的屏幕尺寸和颜色信息。可以通过windows.screen对象的width属性和height属性来引用显示器的宽高,可以通过colorDepth属性和pixelDepth属性来引用显示器的色深和位深度。
获取显示器的屏幕尺寸和颜色信息
window.screen 对象提供以下属性,用于获取显示器的屏幕尺寸和颜色信息。
screen.availWidth 显示的可用宽度
screen.availHeight 显示的可用高度
screen.width 显示的宽度
screen.height 显示高度
screen.colorDepth 显示颜色深度
screen.pixelDepth 显示位深
显示屏的宽度和高度可以通过 width 和 height 属性来引用,但根据智能手机型号的不同,显示屏内可能存在突起,这可能会减少实际可用的宽度和高度。在这种情况下,请参考 availWidth 和 availHeight 属性。
我不明白显示颜色深度和位深度之间的区别。两者都返回显示器使用的颜色位数。例如,如果 RGB 的每种颜色(红/绿/蓝)各有 8 位,则颜色深度和位深度将为 24。(有时 32 位加 8 位 alpha 通道表示不透明度)。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p id="msg">显示显示尺寸和颜色信息[creen.width、screen.height]</p>
<script>
let element = document.getElementById('msg');
let screenInfo =
'availWidth:' + screen.availWidth + '<br>' +
'availHeight:' + screen.availHeight + '<br>' +
'Width:' + screen.width + '<br>' +
'Height:' + screen.height + '<br>' +
'ColorDepth:' + screen.colorDepth + '<br>' +
'PixelDepth:' + screen.pixelDepth;
element.insertAdjacentHTML('afterend', '<p>' + screenInfo + '</p>');
</script>
</body>
</html>
当您在浏览器中查看网页时,它会显示有关您的浏览器正在运行的显示器的大小和颜色的信息。以下是在 Windows 上显示时的情况。
手机的显示也会根据手机的屏幕尺寸而显示不同的结果。
这样我们就获得了有关每个环境中显示器的屏幕尺寸和颜色的信息。
获取有关网页的信息
获取有关网页的信息
window.document 对象提供以下属性来获取当前显示的网页。
document.characterSet 网页字符编码
document.contentType 网页内容类型
document.domain 网页的域
document.lastModified 网页最后修改日期
document.referrer 当前网页的链接来源
document.title 网页标题
document.URL 网页的URL
大多数属性是只读属性,但您可以为 document.title 和 document.domain 属性设置值。
※ 只能为 document.domain 属性设置当前域或当前域的更高域。例如,如果您当前的域是 www.flashyonder.com,则可以将其更改为同一域中的 www.flashyonder.com 或更高域中的 flashyonder.com。这是与同源策略一起进行的设置。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p id="msg">显示网页信息[document.characterSet]。</p>
<script>
let element = document.getElementById('msg');
let documentInfo =
'characterSet: ' + document.characterSet + '<br>' +
'contentType: ' + document.contentType + '<br>' +
'domain: ' + document.domain + '<br>' +
'lastModified: ' + document.lastModified + '<br>' +
'referrer: ' + document.referrer + '<br>' +
'title: ' + document.title + '<br>' +
'URL: ' + document.URL + '<br>';
element.insertAdjacentHTML('afterend', '<p>' + documentInfo + '</p>');
</script>
</body>
</html>
当您在浏览器中查看网页时,它会显示有关您浏览器中显示的网页的信息。
Cookie 是存储在您的浏览器中的一小段文本数据。它是从服务器发送到浏览器并保存的,反之亦然,从浏览器保存的cookie发送到服务器。可以写入cookie。本节介绍如何使用 JavaScript 保存 cookie 和读取已保存的 cookie。
读取和写入 cookie
Cookie 是可以存储在您的浏览器中的一小段数据。当从浏览器访问网络服务器时,cookie数据从服务器端发送到浏览器并保存,或者保存的cookie从浏览器发送到网络服务器。
您可以通过引用 window.document 对象的 Cookies 属性来读取与当前打开的网页关联的所有 cookie。格式如下。
document.cookie
Cookie 以“NAME=VALUE”格式存储。可以存储多个组合,因此检索值的形式为:
'name1=value1; name2=value2; ...'
反之,写一个cookie,给document.cookie赋值。
document.cookie = newcookie
以“NAME=VALUE”格式写入要写入 cookie 的值。可以写多个组合,但一次只能写一个。
document.cookie = 'name=Yuhua';
document.cookie = 'old=27';
如果NAME或VALUE中包含分号(;)、逗号(,)、空格或日文字符,则必须在URL编码后进行描述。
let myname = encodeURIComponent('于华');
document.cookie = 'name=' + myname;
写入 cookie 的值可以写入几个属性,例如到期日期。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p id="msg">读取和写入 cookie。</p>
<script>
document.cookie = 'old=27';
document.cookie = 'address=Qingdao';
let name = encodeURIComponent('于华');
document.cookie = 'name=' + name;
let e = document.getElementById('msg');
e.insertAdjacentHTML('afterend', '<p>' + document.cookie + '</p>');
</script>
</body>
</html>
当一个网页在浏览器中显示时,首先写入cookie,然后在浏览器中读取并显示保存的cookie
检查保存在 Chrome 开发者工具中的 cookie
还可以通过浏览器查看存储的 cookie。在这里,作为示例,让我们检查使用 Google Chrome 保存的 cookie。
1.开发人员工具将出现在屏幕底部(可以设置为出现在不同的位置)。应用程序选项卡出现时单击它。
2.选择【更多工具】3.选择【开发者工具】4.点击【Application】
5. 单击左侧菜单列表中“存储”中“Cookies”左侧的向下箭头将其展开。
6.在展开的列表中点击目标主机名,右侧屏幕会显示cookie中存储的NAME和VALUE的组合列表。
每个组合右边是可以在cookie中设置的属性值。由于这次我们没有显式设置任何属性,它们都有默认值。
向 cookie 写入值时,需要 NAME=VALUE 的值,但在写入值时,您可以指定各种属性,例如 cookie 的过期日期和 cookie 发送到的域。在这里,我们将解释可以在 cookie 中指定的属性类型、如何使用它们以及如何通过 JavaScript 设置它们。
cookie 属性的类型以及如何指定它们
将值写入 cookie 时可以指定的属性包括:
Expires=DATE Cookie过期日期(日期)
Max-Age=DATE Cookie过期时间,单位秒
Domain=DAMAIN Cookie的送信DAMAIN
Path=PATH Cookie的的送信路径
Secure https通信时发送cookie
HttpOnly document.cookie 禁用 cookie
SameSite=VAL 通过其他站点请求时是否发送cookie
向 cookie 写入值时,要指定属性,请在分号 (;) 后写入属性名称=值,如下所示。您还可以指定多个属性。
document.cookie = 'NAME=VALUE; Max-Age=100; Domain=example.com'
即使使用 document.cookie 获取浏览器中存储的 cookie,也无法获取为每个值设置的属性。例如,即使你像下面这样写了一个带有Max-Age属性的值,当你获取到该值时,你也只会得到old=27。
document.cookie = 'old=27; Max-Age=100;'; alert(document.cookie);
如果您想检查存储在 cookie 中的值的属性,请使用您的浏览器的功能。例如,对于 Chrome,您可以从开发人员工具中进行检查。
それではそれぞれの属性について説明します。
Cookie过期时间(Expires和Max-Age属性)
以日期格式或以秒为单位指定 cookie 过期时间。如果未指定,cookie 将在会话结束前过期。
如果以日期格式指定,请为 Expires 属性以“Wdy, DD-Mon-YYYY HH:MM:SS GMT”格式指定。例如:
document.cookie = 'A=B; Expires=Wed, 06 Jan 2021 08:11:26 GMT';
如果以秒为单位指定,请指定表示 Max-Age 属性的有效期限的秒数。例如:在下列情况下,它将是 100 秒。
document.cookie = 'A=B; Max-Age=100';
例如,如果将过期时间设置为 100 秒,则该值将在写入 100 秒后自动从 cookie 中删除。
发送 cookie 的域(域属性)
默认情况下,仅当您访问与存储 cookie 的页面主机名相同的页面时,才会发送存储在浏览器中的 cookie。例如,访问 www.example.com/dir/index.html 时保存的 cookie 将在同一主机上访问 www.example.com 上的页面时发送。它不会发送到子域,例如 sub.www.example.com。
Domain 属性可以设置为发出 cookie 的主机或其上级域。如果您设置域属性,cookie 将被发送到使用该域和子域的主机。比如设置example.com,写成如下。
document.cookie = 'A=B; Domain=flashyonder.com';
在这种情况下,除了发布 cookie 的主机 www.flashyonder.com 之外,当您访问 blog.flashyonder.com 或 host.flashyonder.com 上的页面时,也会发送 cookie。当您访问 sub.www.flashyondercom 上的页面时,我们也会发送 cookie。
请注意,如果您为 Domain 属性指定一个完全不同的域,则该值将不会写入 cookie。
发送 cookie 的路径(Path 属性)
默认情况下,仅当您访问与存储 cookie 的页面具有相同路径的页面时,才会发送存储在浏览器中的 cookie。例如,访问 www.flashyonder.com/dir/index.html 时发出的 cookie 只会在访问路径前缀与 /dir/index 匹配的页面时发送。
PATH 属性可以设置为与发出 cookie 时相同的路径或更接近根目录的路径。如果你设置了 Path 属性,当你访问路径与指定路径匹配的页面时,cookie 将被发送。例如设置/dir,说明如下。
document.cookie = 'A=B; Path=/dir';
在这种情况下,除了 /dir/index.html 之外,当访问具有与 Path 属性中设置的值匹配的路径的页面时,例如 /dir/inde2.html 或 /directory,将发送一个 cookie。
请注意,如果您为 Path 属性指定完全不同的路径(例如 /img ),则该值将不会写入 cookie。
Secure属性和 HttpOnly 属性
如果描述了 Secure 属性,则只有在通过 HTTPS 通信时才会发送 cookie。通过 HTTP 通信时不发送 Cookie。要设置 Secure 属性,只需按如下方式编写 Secure:
document.cookie = 'A=B; Secure';
如果写入了 HttpOnly 属性,则无法通过 JavaScript document.cookie 获取该值。此外,您不能将值写入具有 document.cookie 的 HttpOnly 属性的 cookie。在设置 HttpOnly 属性时,只需编写 HttpOnly,如下所示:
document.cookie = 'A=B; HttpOnly';
SameSite 属性
例如,SameSite 属性是用于控制在通过链接从网站 A 转移到网站 B 时是否发送存储在浏览器中的 B 的 cookie 的属性。
可能的值有 strict、lax、none。如果你设置严格,它不会发送 B 的 cookie。对于 lax,cookie 仅针对 GET 和 HEAD 等安全方法发送,而不针对 POST 发送。如果没有,则无限制地发送 B 的 cookie。
如果要对 SameSite 属性设置严格,写法如下。
document.cookie = 'A=B; SameSite=strict';
在 Chrome 中,自 2021 年 1 月起,如果未设置 SameSite 属性,将按规定处理 lax。此外,指定 none 时,必须同时设置 Secure 属性。
document.cookie = 'A=B; SameSite=none; Secure';
无论设置哪个SameSite属性,在浏览器地址栏直接输入B站点的URL访问B站点时,都会发送B的cookie。据说将 SameSite 属性设置为 strict 或 lax 可以有效防止 CSRF(跨站点请求伪造)等安全问题。
示例代码
请看下面的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<p id="msg">>读取和写入 cookie。</p>
<script>
document.cookie = 'old=38; SameSite=strict; Secure';
document.cookie = 'address=Qingdao; Max-Age=100';
let e = document.getElementById('msg');
e.insertAdjacentHTML('afterend', '<p>' + document.cookie + '</p>');
</script>
</body>
</html>
当一个网页在浏览器中显示时,首先写入cookie,然后在浏览器中读取并显示保存的cookie。
如果您检查保存在 Chrome 开发人员工具中的 cookie,则会为保存的 name=old 值设置 SameSite 和 SameSite 属性,并且为 name=address 值设置 Max-Age 属性。