预习博客（BOM）

散落于尘埃

于 2021-05-29 00:51:08 发布

阅读量151

点赞数 3

本文链接：https://blog.csdn.net/m0_56018900/article/details/117256779

版权

文章目录

前端
BOM

前端

BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话

JavaScript Window

window对象

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

window.document.getElementById("header");

等同于

document.getElementById("header");

JavaScript Window Screen

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

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

Screen Width: 1280

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

document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;

Screen Height: 720

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

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

Available Screen Width: 1280

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

document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;

Available Screen Height: 680

•screen.colorDepth
screen.colorDepth 属性返回用于显示一种颜色的比特数

document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;

Screen Color Depth: 24

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

document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;

Screen Pixel Depth: 24

JavaScript Window Location

对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
•window.location.href 返回当前页面的 href (URL)
window.location.href 属性返回当前页面的 URL

document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;

页面位置是 http://www.w3school.com.cn/js/js_window_location.asp

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

document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;

页面主机名是 www.w3school.com.cn

•window.location.pathname 返回当前页面的路径或文件名
window.location.pathname 属性返回当前页面的路径名

document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;

页面路径是 /js/js_window_location.asp

•window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.protocol 属性返回页面的 web 协议

document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;

页面协议是 http:

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

JavaScript Window History

对象包含浏览器历史
•history.back() - 等同于在浏览器点击后退按钮
history.back() 方法加载历史列表中前一个 URL,等同于在浏览器中点击后退按钮。
•history.forward() - 等同于在浏览器中点击前进按钮
history forward()方法加载历史列表中下一个 URL,等同于在浏览器中点击前进按钮。

JavaScript Window Navigator

对象包含有关访问者的信息
•navigator.appName
appName 属性返回浏览器的应用程序名称：

<p id="demo"></p>

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

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

<p id="demo"></p>

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

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

<p id="demo"></p>

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

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

<p id="demo"></p>

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

JavaScript 弹出框

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

警告框

如果要确保信息传递给用户，通常会使用警告框；当警告框弹出时，用户将需要单击“确定”来继续

语法：window.alert(“sometext”);
可不带window前缀

确认框

如果用户验证或接受某个东西，则通常使用“确认”框；当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行；如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false

语法：window.confirm(“sometext”);
可不带window前缀

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

提示框

如果用户在进入页面前输入值，通常会使用提示框;当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行;如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL

语法：window.prompt(“sometext”,“defaultText”);
可不带window前缀

折行
如需在弹出框中显示折行，请在反斜杠后面加一个字符 n。

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

在这里插入图片描述

JavaScript Timing

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

setTimeout() 方法

setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数

window.setTimeout(function, milliseconds);

第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。

停止执行
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

setInterval() 方法

setInterval(function, milliseconds)等同于 setTimeout()，但持续重复执行该函数

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。

停止执行
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

window.clearInterval(timerVariable)

clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

JavaScript Cookies

Cookie 在网页中存储用户信息
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie
创建

document.cookie = “username=Bill Gates”;

读取

var x = document.cookie;

删除
直接把 expires 参数设置为过去的日期即可

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

Cookie 字符串

cookie1 = value; cookie2 = value;

函数
设置、获取、检测

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