Window对象的属性

huangpb0624

已于 2022-05-22 23:35:33 修改

阅读量2.9k

点赞数 2

分类专栏： JavaScript 文章标签：哈希算法服务器算法

于 2016-08-26 13:45:06 首次发布

本文链接：https://blog.csdn.net/huangpb123/article/details/52327613

版权

JavaScript 专栏收录该内容

64 篇文章 10 订阅

订阅专栏

Window对象的window和self属性都指代当前窗口对象本身。可以使用这两个属性来显示引用当前窗口。

一、Location 对象

Location对象包含有关文档当前位置的信息。

Location 对象的属性

示例：http://www.home.com:8080/location/page.html?ver=1.0&id=timlq#love

下面这些属性的赋值操作都会在历史记录中新增一条记录，可用于前进、后退操作。

1. 跳转到新页面

window.location = 'https://www.baidu.com/'

等效于：window.location.href = 'http://www.baidu.com'

2. window.location.href：（可读/写）完整的 URL。

3. window.location.protocol：（可读/写）协议部分，“http:”。

4. window.location.host：（可读/写）URL的主机名和端口部分，“www.home.com:8080”。

5. window.location.hostname：（可读/写）URL的主机名，“www.home.com”。

6. window.location.port：（可读/写）端口号，“8080”（如果采用默认的80端口(即使添加了:80)，那么返回值并不是“80”而是空字符）。

7. window.location.pathname：（可读/写）URL的路径名，“/location/page.html”。

8. window.location.search：（可读/写）查询参数，“?ver=1.0&id=timlq”，会重新加载当前URL。

9. window.location.hash：（可读/写）文档标识符，即 hash 值或锚点，“#love”。

location.hash = ‘#home’：修改hash只会在历史记录中新增一条记录，但不会重新加载当前URL。文档会滚动到文档中元素的id定义为“home”的位置，如果没有找到相对应的id，会滚动到文档顶部。开发中，单页应用经常会绑定 window.onhashchange 事件监听 hash 的改变来实现页面的局部刷新。
location.hash = ‘#home?id=123’：在“#”号后面的“？”号不属于search，而是属于 hash 的一部分。比如，"http://mysite.com/index.html#home?id=123"，用 location.search 获取到的是空字符串，用 location.hash 获取到的是 #home?id=123。

其他

Location 对象的其他属性 —— protocol, host, hostname, port, pathname 和 search，被称为“URL分解”属性。

对 Location 的URL分解属性重新赋值会改变URL的位置，并且导致浏览器刷新（如果改变的是hash属性，则在当前文档中进行跳转）。

Location 对象的API

1. assign(url)：页面跳转。等同于 href 属性设置为 url。

2. reload()：重新加载当前文档。

如果不传参数 true，就是会读取缓存（请求文档资源时，请求头会带过去 If-Modified-Since 判断文档资源是否更新），相当于普通刷新。如果传了参数 true，就会绕过缓存重新从服务器下载文档资源，相当于强制刷新。

3. replace(url)：页面跳转（在浏览器的历史记录中替换掉当前文档）。如果url是一个相对路径，例如 location.replace('home.html')，是相对于当前文档的位置来解析的。

二、History 对象

History 对象表示窗口的浏览历史。但是，由于隐私原因，它不允许脚本读取曾经访问过的真实的URL（如果允许，则任意脚本都可以窥探你的浏览历史）。只能进行前进、后退等一些操作。

1. window.history.length：浏览历史列表中的条目数目

2. window.history.back()：后退

3. window.history.forward()：前进

4. window.history.go(n)：跳转。n 可选正数或负数，正数是前进，负数是后退。参数为0或者没有参数，这个方法将重新加载当前文档。

5. window.history.pushState(data, title, [url])：添加一个新的条目到窗口的浏览历史中，保存一个由data以及指定的title和url组成的结构化副本。如果用户迟些使用浏览器的历史导航机制回到这个保存的状态，window.onpopstate 事件将在当前窗口上触发，对应的 PopStateEvent 对象将在它的 state 属性中维护 data 的另一个副本。

例如：window.history.pushState(null, '', '#home')

data：是一个状态对象，该对象可以是任何能够通过 JSON.stringify() 方法转换的对象，也可以是其他类似 Date 和 RegExp 这样特定的本地类型。我们规定了状态对象在序列化表示后有640k的大小限制。
title：是一个可选的标题（普通的文本字符串），你可以为跳转的state传递一个短标题。
url: 该参数定义了新的历史URL记录，它将显示在地址栏中。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。如果url是一个绝对URL，它必须与当前文档同源。如果url是相对路径，它将被作为相对于当前文档的地址解析。该参数是可选的，缺省为当前URL。使用URL的通用方法是只使用以“#”开头的片段标识符。

6. window.history.replaceState(data, title, [url])：将当前条目用新的状态data、title以及url更新。

三、Navigator 对象

Navigator 对象包含关于Web浏览器的信息，可以使用这些属性来实现对特定平台的定制。

这些信息具有一定的误导性，这是因为：

一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

属性

1. navigator.appName：浏览器的名字。对基于Netscape的浏览器而言（大部分浏览器都是）,这个属性的值为"Netscape"。在IE中,这个属性的值为"Microsoft Internet Explorer" 。为了兼容现有的代码,许多浏览器返回较老的或欺骗性的信息。（可能是不正确的）。

2. navigator.appCodeName：返回浏览器的内部代码名称（可能是不正确的）。

3. navigator.appVersion：浏览器版本及平台信息。为了兼容现有的代码,大多数浏览器对于这个属性返回过时的旧值。（可能是不正确的）。

返回的字符串前面的数字通常是 4.0 或 5.0，表示它是第4代或第5代兼容的浏览器。

4. navigator.userAgent：浏览器用于HTTP请求的user-agent头信息的值。这个属性通常包含 appVersion 中的所有信息，并且常常也可能包含其他的细节。因此浏览器嗅探代码通常用它来嗅探。

为什么 Chrome 浏览器的 userAgent 包含 Safari？

这是浏览器演化的结果，后面开发出来的浏览器为了能够使用给之前浏览器准备的代码，所以在自己的 userAgent 加入特定字段冒充之前的浏览器。字段出现的先后顺序是：Mozilla -> KHTML ->AppleWebKit -> Safari -> Chrome。详解

5. navigator.platform：运行当前浏览器的操作系统以及/或硬件平台（"Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "MacIntel", "HP-UX", "SunOS", "Linux i586"等）。

6. navigator.language：浏览器语言种类（"zh-CN", "zh", "en"）

7. navigator.onLine：表明当前浏览器是否连接网络。当这个属性的状态改变时,浏览器将在Window对象上触发online和offline事件。

8. navigator.connection：{Object}，提供有关设备的网络连接信息。

downlink：表示有效带宽的估计值，单位是M/s。
rtt：表示有效的往返时间估计，单位是ms。
effectiveType：当前的网络连接类型（'slow-2g'、'2g'、'3g'、'4g'等）。
onchange：网络状态发生改变后执行的函数。
saveData：打开/请求数据保护模式。

9. navigator.cookieEnabled：当前浏览器是否启用了cookie。

10. navigator.geolocation：定义了用于确定用户地理位置信息的接口。

11. navigator.getBattery()：获取设备的电池状态。（兼容性问题严重）

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
  charging, // 是否在充电
  chargingTime, // 充满电所需时间
  dischargingTime, // 当前电量可使用时间
  level, 剩余电量

  onchargingchange, // 监听充电状态变化
  onchargingtimechange, // 监听充满电所需时间变化
  ondischargingtimechange, // 监听当前电量可使用时间变化
  onlevelchange // 监听电量变化
}

12. navigator.vibrate()：使设备进行震动（移动端支持）

// 震动一次
navigator.vibrate(100);

// 连续震动，震动200ms、暂停100ms、震动300ms
navigator.vibrate([200, 100, 300]);

四、Screen 对象

Screen对象提供有关屏幕显示的大小和可用的颜色数量的信息。

属性

availWidth 和 availHeight：指明在其上显示网页浏览器的屏幕的可用宽度/高度,单位为像素。这个可用宽度/高度不包含水平/垂直方向上显示固定的桌面功能的空间,比如在屏幕底部的工具栏或停靠栏。
width 和 height：屏幕的总宽度/高度,单位为像素。

五、window.onerror 错误处理

当未捕获的异常传播到调用栈上时就会调用它。

window.onerror 的第一个参数是描述错误的一条信息。第二个参数是引发错误的js代码所在的文档的URL。第三个参数是文档中发生错误的行数。如果是Chrome浏览器，window.onerror 处理程序返回 true，它通知浏览器事件处理程序已经处理了错误，不需要其他操作。换句话说，浏览器不应该显示它自己的错误消息。

来看一个打印错误消息，但不超过三次的示例：

window.onerror = function(msg, url, line) {
  if (onerror.num++ < onerror.max) {
    console.log({msg, url, line});
    return true;
  }
}
onerror.max = 3;
onerror.num = 0;

六、Window 的其他方法

1. window.open(url, name, features, replace)

在本窗口或新窗口打开链接，或用于查找一个已命名的窗口。会返回代表命名或新窗口的Window 对象。（一般用于简单的弹出页面，现在基本上都被屏蔽掉。）

在由 window.open() 方法创建的窗口中，opener 属性引用的是打开它的脚本的 Window 对象。在其他窗口中，opener 为 null。

参数：

url：新链接地址
name：{String} 声明新窗口的名字，如果该参数指定了一个已经存在的窗口，会直接使用已存在的窗口，该窗口会刷新。此时，features 无效。可选值：'', '_self', '_blank', '_search', 自定义名字。如果省略此参数，会使用指定的名字“_blank”打开一个新的，未命名的窗口。当且仅当窗口包含的文档来自相同的源或者是这个脚本打开了那个窗口，脚本才可以只通过名字来指定存在的窗口。还有，如果其中一个窗口是内嵌在另一个窗口里的窗体，那么在它们的脚本之间就可以相互导航。这种情况下，可以使用保留的名字“_top”（顶级祖先窗口）和“_parent”（直接父级窗口）来获取彼此的浏览上下文。窗口的名字可以作为<a>和<form>元素上target属性的值，用来表示引用的文档（或表单提交结果）应该显示在命名的窗口中。这个target属性的值可以设置为“_blank”、“_parent”或“_top”。如果<iframe>元素有name属性，表示该iframe的Window对象会用它作为那么属性的初始值。
features：{String} 新窗口的配置参数，可以指定窗口的尺寸，控制状态栏的显示等。以逗号分隔，如'width=500,height=300'。（非标准，HTML5主张浏览器忽略这个配置）。当指定第三个参数时，所有没有显示指定的功能都会忽略。出于安全考虑，浏览器包含对可能指定的功能的限制。例如，通常不允许指定一个太小或位于屏幕之外的窗口，并且一些浏览器不允许创建一个没有状态栏的窗口。
replace：{Boolean} 。只在第二个参数命名的是一个存在的窗口时才有用。表示是要替换掉窗口浏览历史的当前条目（true），还是应该在窗口浏览历史中创建一个新的条目（false），后者是默认的设置。

为了防止弹出窗口的滥用，大部分浏览器都增加了弹出窗口过滤系统。通常，open() 方法只有当用户手动单击按钮或链接的时候才会调用。js尝试在浏览器初始载入（或卸载）时开启一个弹窗，通常会失败。

2. window.close()：关闭当前窗口

3. window.print()：调用print()方法，效果等同于用户选择浏览器的“打印”按钮或菜单项。一般来说，这会弹出一个对话框，允许用户取消或定制打印请求。

4. window.devicePixelRatio：设备分辨率（物理像素和独立像素的比值）。

let Screen = {
      width: window.screen.width * window.devicePixelRatio,
      height: window.screen.height * window.devicePixelRatio,
}

七、窗体之间的关系

任何窗口或窗体中的js代码都可以用 window 或 self 表示自身的窗口或窗体。窗体可以用 parent 属性引用包含它的窗口或窗体的 Window 对象。

窗体的 top 属性引用的都是指向包含它的顶级窗口。

let childFrame = document.querySelect('#iframe').contentWindow;

可以进行反向操作 —— 从表示窗体的 Window 对象来获取该窗体的 <iframe> 元素 —— 用 Window 对象的 frameElement 属性。

尽管如此，通常不需要使用 contentWindow 属性来获取窗口中子窗体的引用。每个 Window 对象都有一个 frames 属性，它引用自身包含的窗口或窗体的子窗体。frames 属性引用的是类数组对象，并可以通过数字或窗体名进行索引，例如：frames[0], frames['ad']。窗体里运行的代码可以通过 parent.frames[1] 引用兄弟窗口。注意，frames 数组里的元素是 Window 对象，而不是 <iframe> 元素。

如果指定 <iframe> 元素的 name 或 id 属性，那么除了用数字进行索引外，还可以用名字来进行索引。例如，名字为“f1”的 <iframe> 应该用 frames['f1'] 或 frames.f1。

huangpb0624

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Window对象的属性

一、location 对象示例：http://www.home.com:8080/location/page.html?ver=1.0&id=timlq#love1. window.location.href：完整的 URL（可读取可设置）读取：返回值 http://www.home.com:8080/location/page.html?ver=1.0&id=timl...
复制链接

扫一扫

专栏目录