JS-window

发表于 2020-01-22 更新于 2026-06-21 分类于语言， JavaScript

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

Window 子对象 Window 的子对象主要有如下几个：

JavaScript document 对象
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象

Window 对象

JavaScript Window - 浏览器对象模型

Window 对象是 BOM 中所有对象的核心，除了是 BOM 中所有对象的父对象外，还包含一些窗口控制函数。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

window对象不但充当全局作用域，而且表示浏览器窗口。

window 对象有 innerWidth和 innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

Window 尺寸

var w = window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

var h = window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

window.navigator

navigator 对象包含有关访问者浏览器的信息。最常用的属性包括：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

小案例：

<div id="example"></div>

<script>
    txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
    txt+= "<p>Browser Name: " + navigator.appName + "</p>";
    txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
    txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
    txt+= "<p>User-agent language: " + navigator.language + "</p>";

    document.getElementById("example").innerHTML = txt;
</script>

window.screen

window.screen 对象包含有关用户屏幕的信息。这些信息可以用来了解客户端硬件的基本配置。

常用的属性有：

screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如 8、16、24。

小案例：

1
2
3

<script>
  document.write("宽度的可用宽度（不包含任务栏）: " + screen.availWidth);
</script>

Location

window.location 对象在编写时可不使用 window 这个前缀。location 对象表示当前页面的 URL 信息。例如，一个完整的 URL：

1	http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用 location.href 获取。要获得 URL 各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加载一个新页面，可以调用 location.assign()。如果要重新加载当前页面，调用 location.reload() 方法非常方便。

Document

document 对象表示当前页面。由于HTML在浏览器中以 DOM 形式表示为树形结构，document 对象就是整个 DOM 树的根节点。

document 的 title 属性是从 HTML 文档中的 <title>xxx</title> 读取的，但是可以动态改变：document.title = '努力学习JavaScript!';

document 对象还有一个 cookie 属性，可以获取当前页面的 Cookie。

Cookie 是由服务器发送的 key-value 标示符。因为 HTTP 协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用 Cookie 区分。当一个用户成功登录后，服务器发送一个 Cookie 给浏览器，例如 user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个 Cookie，服务器根据 Cookie 即可区分出用户。

Cookie 还可以存储网站的一些设置，例如，页面显示的语言等等。

JavaScript可以通过 document.cookie 读取到当前页面的 Cookie。

如果引入的第三方的JavaScript中存在恶意代码，则 www.foo.com 网站将直接获取到 www.example.com 网站的用户登录信息。

为了解决这个问题，服务器在设置 Cookie 时可以使用 httpOnly，设定了 httpOnly 的 Cookie 将不能被 JavaScript 读取。这个行为由浏览器实现，主流浏览器均支持 httpOnly 选项，IE 从 IE6 SP1 开始支持。

为了确保安全，服务器端在设置 Cookie 时，应该始终坚持使用 httpOnly。

History

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() -
与在浏览器点击后退按钮相同
history.forward() -
与在浏览器中点击向前按钮向前相同

JavaScript 弹窗

警告框

window.alert(“sometext”);

确认框

window.confirm(“sometext”);

提示框

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setInterval() 方法 setInterval() 间隔指定的毫秒数不停地执行指定的代码

1	window.setInterval("javascript function", milliseconds);

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
window.clearInterval() 方法可以不使用 window 前缀，直接使用函数 clearInterval()。要使用 clearInterval() 方法,
在创建计时方法时你必须使用全局变量。

<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>

<script>
  var myVar = setInterval(function () {
    myTimer();
  }, 1000);
  function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
  }
  function myStopFunction() {
    clearInterval(myVar);
  }
</script>

setTimeout() 方法

语法

1	window.setTimeout("javascript 函数", 毫秒数);

使用和 setInterval()类似, 顺便可以 clearTimeout() 方法用于停止执行
setTimeout()方法的函数代码。

JavaScript Cookies

Cookies 用于存储 web 页面的用户信息。

由于 JavaScript 是运行在客户端的脚本，所以可以使用 JavaScript
来设置运行在客户端的 Cookies。

使用 JavaScript 创建 Cookie JavaScript 可以使用 document.cookie 属性来创建
、读取、及删除 cookies。

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。您可以使用 path
参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面

document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value;
cookie2=value; cookie3=value;

1	document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

设置 cookies

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

然后，我们创建一个函数用户返回指定 cookie 的值：

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}