第七周预习——BOM

最新推荐文章于 2024-07-31 16:33:32 发布

是菁菁哦

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量102

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/jingjingxuaokeai/article/details/125526144

版权

BOM 浏览器对象模型（Browser Object Model ）

浏览器对象模型允许 JavaScript 与浏览器对话。不存在浏览器对象模型（BOM）的官方标准，现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

Window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");

等于

document.getElementById("header");

窗口尺寸

两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸：

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;

该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）。

其他窗口方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

Window Screen对象

window.screen 对象包含用户屏幕的信息，不带 window 前缀也可以写。

属性

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

Window Screen 宽度

screen.width 属性返回以像素计的访问者屏幕宽度。
显示以像素计的屏幕宽度：

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

结果将是：

Screen Width: 1536

Window Screen 高度

screen.height 属性返回以像素计的访问者屏幕的高度。

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

Window Screen 色深

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”。

Window Screen 像素深度

screen.pixelDepth 属性返回屏幕的像素深度。

Window Location对象

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面，可不带 window 前缀书写。

属性

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

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

Window Location 主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。

Window Location 路径名

window.location.pathname 属性返回当前页面的路径名。

Window Location 协议

window.location.protocol 属性返回页面的 web 协议。

Window Location 端口

window.location.port 属性返回（当前页面的）互联网主机端口的编号。
大多数浏览器不会显示默认端口号（http 为 80，https 为 443）。

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>

Window History对象

window.history 对象包含浏览器历史，可不带 window 书写。
为了保护用户的隐私，JavaScript 访问此对象存在限制。

属性

history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮

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>

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>

Window Navigator对象

window.navigator 对象包含有关访问者的信息，可以不带 window 前缀来写。

属性

navigator.appName
navigator.appCodeName
navigator.platform

浏览器 Cookie

cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>

浏览器应用程序名称

appName 属性返回浏览器的应用程序名称：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>

“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>

“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

浏览器引擎

product 属性返回浏览器引擎的产品名称：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
</script>

浏览器版本

appVersion 属性返回有关浏览器的版本信息：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>

浏览器代理

userAgent 属性返回由浏览器发送到服务器的用户代理报头（user-agent header）：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.userAgent;
</script>

警告！！！

来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本，因为：

不同浏览器能够使用相同名称
导航数据可被浏览器拥有者更改
某些浏览器会错误标识自身以绕过站点测试
浏览器无法报告发布晚于浏览器的新操作系统

浏览器平台

platform 属性返回浏览器平台（操作系统）：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.platform;
</script>

浏览器语言

language 属性返回浏览器语言：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>

浏览器是否在线

onLine 属性返回 true，假如浏览器在线：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.onLine;
</script>

Java 是否启用

javaEnabled() 方法返回 true，如果 Java 已启用：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.javaEnabled();
</script>

弹出框

有三种类型的弹出框：警告框、确认框和提示框。

警告框

如果要确保信息传递给用户，通常会使用警告框。
当警告框弹出时，用户将需要单击“确定”来继续。
语法
window.alert(“sometext”);
window.alert() 方法可以不带 window 前缀来写。

alert("我是一个警告框！");

确认框

如果希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法
window.confirm(“sometext”);
window.confirm() 方法可以不带 window 前缀来编写。

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

提示框

如果希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
语法
window.prompt(“sometext”,“defaultText”);
window.prompt() 方法可以不带 window 前缀来编写。

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

折行

如需在弹出框中显示折行，请使用\n。

alert("Hello\nHow are you?");

JavaScript Timing 事件

JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件（ Timing Events）。

Timing 事件

window 对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

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);

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);

JavaScript Cookies

Cookie 可以在网页中存储用户信息。

什么是Cookie

Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。Cookie 是为了解决“如何记住用户信息”而发明的，当用户访问网页时，他的名字可以存储在 cookie 中，下次用户访问该页面时，cookie 会“记住”他的名字。
Cookie 保存在名称值对中，如：
username = Bill Gates
当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; 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=/";

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie

删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值，直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

必须定义 cookie 路径以确保删除正确的 cookie。如果不指定路径，一些浏览器不会允许删除 cookie。

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 值。

是菁菁哦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第七周预习——BOM

浏览器对象模型允许 JavaScript 与浏览器对话。不存在浏览器对象模型（BOM）的官方标准，现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至（HTML DOM 的）document 对象也是 window 对象属
复制链接

扫一扫