2021-06-16 # BOM的使用学习笔记

最新推荐文章于 2024-10-23 09:00:45 发布

菜鸟Player

最新推荐文章于 2024-10-23 09:00:45 发布

阅读量897

点赞数 1

分类专栏：学习笔记 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_46800734/article/details/117959094

版权

学习笔记同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

Content

BOM的使用

BOM的使用

BOM（浏览器对象模型）

1.1 window对象

对象是BOM的核心对象，表示为一个浏览器的实例。

window对象既是通过JavaScript网文浏览器的一个接口，也是ECMAScript规定的Global对象。
这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问parseInt()等方法。

1.1.1 定义全局变量与在 window 对象上直接定义属性的差别

抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以。

var age = 29;
window.color = "red";
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

刚才使用 var 语句添加的 window 属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete 操作符删除。

IE8及更早版本在遇到使用delete删除 window 属性的语句时，不管该属性最初是如何创建的，都会抛出错误，以示警告。 IE9 及更高版本不会抛出错误

Tips:尝试访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知
道某个可能未声明的变量是否存在。

//这里会抛出错误，因为 oldValue 未定义
var newValue = oldValue;
//这里不会抛出错误，因为这是一次属性查询
//newValue 的值是 undefined
var newValue = window.oldValue;

Windows Mobile 平台的 IE 浏览器不允许通过 window.property = value 之类的形式，直接在 window 对象上创建新的属性或方法。可是，在全局作用域中声明的所有变量和函数，照样会变成 window 对象的成员。

1.1.2 窗口关系及其框架

window.frames[]和`<frame></frame>`

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。
下面是一个包含框架的页面：

<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
  <frame src="frame.htm" name="topFrame">
 <frameset cols="50%,50%">
  <frame src="anotherframe.htm" name="leftFrame">
  <frame src="yetanotherframe.htm" name="rightFrame">
 </frameset>
</frameset>
</html>

可以通过window.frames[0]或者 window.frames[“topFrame”]来引用上方的框架。
最好使用top 而非 window 来引用这些框架（例如，通过 top.frames[0]）。

top 对象始终指向最高（最外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。
因为对于在一个框架中编写的任何代码来说，其中的 window 对象指向的都是那个框架的特定实例，而非最高层的框架。

图中展示了在最高层窗口中，通过代码来访问前面例子中每个框架的不同方式。

与 top 相对的另一个 window 对象是 parent。parent（父）对象始终指向当前框架的直接上层框架。
在某些情况下， parent 有可能等于 top；
但在没有框架的情况下， parent 一定等于top（此时它们都等于 window）。

<html>
<head>
  <title>Frameset Example</title>
</head>
<frameset rows="100,*">
  <frame src="frame.htm" name="topFrame">
  <frameset cols="50%,50%">
    <frame src="anotherframe.htm" name="leftFrame">
    <frame src="anotherframeset.htm" name="rightFrame">
  </frameset>
</frameset>
</html>

这个框架集中的一个框架包含了另一个框架集，该框架集的代码如下所示。

<html>
<head>
  <title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
  <frame src="red.htm" name="redFrame">
  <frame src="blue.htm" name="blueFrame">
</frameset>
</html>

【没懂？？？👇】

浏览器在加载完第一个框架集以后，会继续将第二个框架集加载到 rightFrame 中。如果代码位于redFrame（或 blueFrame）中，那么 parent 对象指向的就是 rightFrame。可是，如果代码位于topFrame 中，则 parent 指向的是 top，因为 topFrame 的直接上层框架就是最外层框架。

图展示了在将前面例子加载到浏览器之后，不同 window 对象的值。
在这里插入图片描述
注意，除非最高层窗口是通过 window.open()打开的（本章后面将会讨论），否则其 window 对象的 name 属性不会包含任何值。

与框架有关的最后一个对象是 self，它始终指向 window；实际上， self 和 window 对象可以互换使用。

引入 self 对象的目的只是为了与 top 和 parent 对象对应起来，因此它不格外包含其他值。

所有这些对象都是 window 对象的属性，可以通过window.parent、 window.top 等形式来访问。

同时，这也意味着可以将不同层次的 window 对象连缀起来,例如: window.parent.parent.frames[0]。

在使用框架的情况下，浏览器中会存在多个 Global 对象。在每个框架中定义的全局变量会自动成为框架中 window 对象的属性。由于每个 window 对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。例如， top.Object 并不等于 top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用 instanceof 操作符。

1.1.3 窗口位置

确定和修改window对象位置的属性和方法：

属性或方法	描述及适用浏览器
screenLeft	表示窗口相对于屏幕左边的位置（IE、 Safari、 Opera 和 Chrome）
screenTop	表示窗口相对于屏幕上边的位置（IE、 Safari、 Opera 和 Chrome）
screenX	提供相同的窗口位置信息（Firefox、Safari 、Chrome）
screenY	提供相同的窗口位置信息（Firefox、Safari 、Chrome）

使用下列代码可以跨浏览器取得窗口左边和上边的位置。

var leftPos = (typeof window.screenLeft == "number") ?
                  window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                  window.screenTop : window.screenY;

在使用这些值的过程中，必须注意一些小问题。
（1）在 IE、Opera 中， screenLeft 和 screenTop 中保存的是从屏幕左边和上边到由 window 对象表示的页面可见区域的距离。

换句话说，如果 window 对象是最外层对象，而且浏览器窗口紧贴屏幕最上端——即 y 轴坐标为 0，那么 screenTop 的值就是位于页面可见区域上方的浏览器工具栏的像素高度。但是，在 Chrome、 Firefox 和 Safari 中， screenY 或 screenTop中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的 y 轴坐标为 0 时返回 0。

（2）更让人捉摸不透是， Firefox、 Safari 和 Chrome 始终返回页面中每个框架的 top.screenX 和top.screenY 值。即使在页面由于被设置了外边距而发生偏移的情况下，相对于 window 对象使用screenX 和 screenY 每次也都会返回相同的值。而 IE 和 Opera 则会给出框架相对于屏幕边界的精确坐标值。

（3）最终结果，就是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而，使用 moveTo()和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的 x 和 y 坐标值，而 moveBy()接收的是在水平和垂直方向上移动的像素数。

下面来看几个例子：

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动 100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动 50 像素
window.moveBy(-50,0);

这两个方法可能会被浏览器禁用；而且，在 Opera 和 IE 7（及更高版本）中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的 window 对象使用。

1.1.4 窗口的大小

innerWidth、innerHeight、outerWidth、outerHeight

“窗口大小总结”可参考链接

属性
innerWidth
innerHeight
outerWidth	返回浏览器窗口本身的尺寸
outerHeight	返回浏览器窗口本身的尺寸

1）outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的 window 对象还是从某个框架访问）。
2）在Opera中，这两个属性的值表示页面视图容器的大小。

“页面视图容器”指的是 Opera 中单个标签页对应的浏览器窗口。

3)在 Chrome 中， outerWidth、 outerHeight 与innerWidth、innerHeight 返回相同的值，即视口（ viewport）大小而非浏览器窗口大小。

属性	描述
document.documentElement.clientWidth	保存了页面视口的信息（IE、 Firefox、 Safari、 Opera 和 Chrome）
document.documentElement.clientHeight	保存了页面视口的信息（IE、 Firefox、 Safari、 Opera 和 Chrome）

1）在 IE6 中，这些属性必须在标准模式下才有效；
2）如果是混杂模式，就必须通过 document.body.clientWidth 和document.body.clientHeight 取得相同信息。

对于混杂模式下的 Chrome，则无论通过document.documentElement 还是document.body 中的 clientWidth 和 clientHeight 属性，都可以取得视口的大小。

标准模式和混合模式的区别：参考链接

虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。窗口大小和视口大小的区别

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
\\检查 pageWidth 中保存的是不是一个数值
if (typeof pageWidth != "number"){  
\\如果不是，则通过检查document.compatMode确定页面是否处于标准模式
    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
\\如果是
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

属性（随着页面的缩放，这些值也会变化）	描述
window.innerWidth	保存着可见视口，也就是屏幕上可见页面区域的大小移动 IE 浏览器不支持此属性
window.innerHeight	保存着可见视口，也就是屏幕上可见页面区域的大小移动 IE 浏览器不支持此属性
document.documentElement.clientWidth	移动 IE 浏览器支持此属性
document.documentElement.clientHeihgt	移动 IE 浏览器支持此属性

在其他移动浏览器中， document.documentElement 度量的是布局视口，即渲染后页面的实际大
小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动 IE 浏览器把布局视口的信息保存在document.body.clientWidth 和document.body.clientHeight 中。这些值不会随着页面缩放变化。
故:最好检测用户使用的移动设被还是桌面浏览器，再决定使用哪个属性!

有关移动设备视口的话题比较复杂，有很多非常规的情形，也有各种各样的建议。移动开发咨询师 Peter-Paul Koch 记述了他对这个问题的研究： http://t.cn/zOZs0Tz。如果你在做移动 Web 开发，推荐你读一读这篇文章。

属性：接收浏览器窗口新宽度和新高度	属性：接收新窗口与原窗口的宽度和高度之差	描述
resizeTo()	resizeBy()	调整浏览器窗口的大小

//调整到 100× 100
window.resizeTo(100, 100);
//调整到 200× 150
window.resizeBy(100, 50);
//调整到 300× 300
window.resizeTo(300, 300);

这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用；
在 Opera和 IE7（及更高版本）中默认就是禁用的。
这两个方法同样不适用于框架，而只能对最外层的window 对象使用。

1.1.5 导航和打开窗口

window.open（）

window.open（）
功能：
①可以打开导航到一个特定得URL
②可以打开一个新得浏览器窗口

可接收四个参数：
①要加载得URL
②窗口目标
③一个特性字符串
④一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

如果该方法传递了第二个参数且是已有窗口或框架的名称，那么就会在其窗口或框架中加载第一个参数指定的URL。

//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");

即在该窗口或框架“topFrame”下打开加载URL 或创建一个新窗口并命名为“topFrame”

target属性还可以加：_self、_parent、_top或_blank

1. 弹出窗口

如果给 window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页——根据浏览器设置）。在不打开新窗口的情况下，会忽略第三个参数。

第三个参数③以逗号分割设置字符串

可设置的字符串：
在这里插入图片描述
注意：整个特性字符串中不允许出现空格

//这行代码会打开一个新的可以调整大小的窗口，窗口初始大小为 400× 400 像素，并且距屏幕上沿和左边各 10 像素。
window.open("http://www.wrox.com/","wroxWindow",
            "height=400,width=400,top=10,left=10,resizable=yes");

window.open()可以允许大多数浏览器窗口进行调整和移动
(有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置)

window.open()方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似，但我们可以对其进行更多控制。

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
                          "height=400,width=400,top=10,left=10,resizable=yes");
//调整大小
wroxWin.resizeTo(500,500);
//移动位置
wroxWin.moveTo(100,100);
调用 close()方法还可以关闭新打开的窗口。
wroxWin.close();

这个方法仅适用于通过 window.open()打开的弹出窗口

一情况下，浏览器主窗口的关闭是需要得到用户允许的
But 弹出窗口可以调用top.close()在不得到用户允许的情况下关闭自己
（But弹窗关闭后，窗口的引用依然存在，但除了像下面这样检测其 closed 属性之外，已经没有其他用处了。）

wroxWin.close();
alert(wroxWin.closed); //true

【没懂？？？👇】
新创建的 window 对象有一个 opener 属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层 window 对象（ top）中有定义，而且指向调用 window.open()的窗口或框架。

例如：

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
                          "height=400,width=400,top=10,left=10,resizable=yes");
alert(wroxWin.opener == window); //true

虽然弹出窗口中有一个指针指向打开它的原始窗口，但原始窗口中并没有这样的指针指向弹出窗口。

窗口并不跟踪记录它们打开的弹出窗口，因此我们只能在必要的时候自己来手动实现跟踪。有些浏览器（如 IE8 和 Chrome）会在独立的进程中运行每个标签页。

当一个标签页打开另一个标签页时，如果两个 window 对象之间需要彼此通信，那么新标签页就不能运行在独立的进程中。

在 Chrome中，将新创建的标签页的 opener 属性设置为 null，即表示在单独的进程中运行新标签页.

如下所示

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
                          "height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.opener = null;

将 opener 属性设置为 null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。标签页之间的联系一旦切断，将没有办法恢复。

2. 安全限制

广告窗口的弹出：广告像是系统弹框（对话框）一样弹出。

在打开计算机硬盘中的网页时， IE 会解除对弹出窗口的某些限制。但是在服务器上执行这些代码会受到对弹出窗口的限制。

3. 弹出窗口屏蔽程序

解决办法：
1、安装Yahoo！Toolbar等带有内置屏蔽程序的使用工具。
2.检测被屏蔽的两种情况
①如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open()很可能会返回 null。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了。

如下面的例子所示。

var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
    alert("The popup was blocked!");
}

②如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open()通常会抛出一个错误。因此，要想准确地检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对 window.open()的调用封装在一个 try-catch 块中。

如下所示。

var blocked = false;
try {
   var wroxWin = window.open("http://www.wrox.com", "_blank");
   if (wroxWin == null){
        blocked = true;
    }
} catch (ex){
    blocked = true;
}
if (blocked){
    alert("The popup was blocked!");
}

在任何情况下，以上代码都可以检测出调用 window.open()打开的弹出窗口是不是被屏蔽了。

但要注意的是，检测弹出窗口是否被屏蔽只是一方面，它并不会阻止浏览器显示与被屏蔽的弹出窗口有关的消息。

1.1.6 间歇调用和超时调用

超时调用：时间过后执行代码
间歇调用：每隔指定的时间就执行一次代码

1. 超时调用

使用window对象的setTimeout()方法。
在这里插入图片描述

【没懂？？？👇】

第二个参数单位为 ms，经过该时间后不一定会执行
在这里插入图片描述
第一种调用方式由于传递字符串可能导致损失，不建议以字符串作为第一个参数。

JavaScript 是一个单线程序的解释器，即一定时间内只能执行一段代码。

为了控制要执行的代码，就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。 setTimeout()的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

（1）调用setTimeout()方法

调用setTimeout()方法之后会返回数值ID，表示超时调用。此ID是计划执行代码的唯一标识，可以用来取消超时调用 → 可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

//设置超时调用
var timeoutId = setTimeout(function() {
    alert("Hello world!");
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);

//meter1、meter2为timeId
meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

菜鸟工具_link
在这里插入图片描述

2.间歇调用

（1）调用setInterval()方法

调用 setInterval()方法同样也会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。
要取消尚未执行的间歇调用，可以使用 clearInterval()方法并传入相应的间歇调用 ID。

取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。

可见，在使用超时调用时，没有必要跟踪超时调用 ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。
一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。
在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用，则完全可以避免这一点。

所以，最好不要使用间歇调用。

1.1.7 系统对话框

1. alert()[略]

3. confirm()[略]

2. prompt()[略]

三个方法的外观有浏览器决定而非CSS
这几个方法打开的对话框都是同步和模态的。
PS：显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

在这里插入图片描述

4. window.print()和window.find()

即打印和查找，这两个对话框是异步显示的，可以将控制权立即交还给脚本。

//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();

这两个方法同样不会就用户在对话框中的操作给出任何信息，因此它们的用处有限。另外，既然这两个对话框是异步显示的，那么 Chrome 的对话框计数器就不会将它们计算在内，所以它们也不会受用户禁用后续对话框显示的影响。

1.2 location 对象

location对象：
提供了导航功能
提供了当前窗口中加载的文档有关的信息
将URL解析为独立的片段，让我们可以通过不同的属性访问这些片段

location对象既是window对象的属性也是document的属性，即window.location和document.location引用的是同一个对象。
在这里插入图片描述

1.2.1 查询字符串参数

location.search

尽管 location.search 返回从问号到 URL 末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。为此，可以像下面这样创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象：
对象字面量link

【没懂？？？👇】

function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象，该对象以字面量形式创建
    args = {},
//取得每一项，根据和号（ &）来分割查询字符串
//并返回 name=value 格式的字符串数组。
    items = qs.length ? qs.split("&") : [],
    item = null,
    name = null,
    value = null,
//在 for 循环中使用
    i = 0,
    len = items.length;
//逐个将每一项添加到 args 对象中,返回第一项为参数名，第二项为参数值的数组
    for (i=0; i < len; i++){
         item = items[i].split("=");
         name = decodeURIComponent(item[0]);
         value = decodeURIComponent(item[1]);
//将 name 作为 args 对象的属性，将 value 作为相应属性的值。   
    if (name.length) {
         args[name] = value;
}
}
    return args;
}

实例：

//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"

可见，每个查询字符串参数都成了返回对象的属性。这样就极大地方便了对每个参数的访问。

1.2.2 位置操作

使用location对象来改变浏览器的位置：

①使用assign()方法并为其传递一个 URL

eg：location.assign(“http://www.wrox.com”);
如果是将 location.href或 window.location 设置为一个 URL 值，也会以该值调用 assign()方法。
eg：window.location = “http://www.wrox.com”;
location.href = “http://www.wrox.com”;（最常用）

②通过将hash、search、 hostname、 pathname 和 port 属性设置为新值来改变 URL。

//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
每次修改 location 的属性（ hash 除外），页面都会以新 URL 重新加载。

在 IE8、 Firefox 1、 Safari 2+、 Opera 9+和 Chrome 中，修改 hash 的值会在浏览器的历史记录中生成一条新记录。在 IE 的早期版本中， hash 属性不会在用户单击“后退”和“前进”按钮时被更新，而只会在用户单击包含 hash 的 URL 时才会被更新。

通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录。
禁用历史记录就可以用replace()方法。此方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace()方法之后，用户不能回到前一个页面。
例子：

<!DOCTYPE html>
<html>
<head>
<title>You won't be able to get back here</title>
</head>
<body>
<p>Enjoy this page for a second, because you won't be coming back here.</p>
<script type="text/javascript">
setTimeout(function () {
location.replace("http://www.wrox.com/");
}, 1000);
</script>
</body>
</html>

③reload()

作用：重新加载当前显示的页面

【没懂？？？👇】

？？？？从浏览器加载和从服务器加载的区别？？？？
如果调用 reload()时不传递任何参数，页面就会以最有效的方式重新加载。
如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。
如果要强制从服务器重新加载，则需要像下面这样为该方法传递参数 true。

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

位于 reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。
为此，最好将 reload()放在代码的最后一行。

1.3 navigator 对象

表中的 navigator 对象的属性通常用于检测显示网页的浏览器类型
在这里插入图片描述

1.3.1 检测插件 P212

1.3.2 注册处理程序 P213

1.4 screen 对象[目前用处不大]

1.5 history 对象

history 是 window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的window 对象关联。

go()方法

作用：在用户的历史记录中任意跳转，可以向后也可以向前
参数：①±
②传递字符串参数

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。
//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");

back()和 forward()方法

可以代替go()方法

//后退一页
history.back();
//前进一页
history.forward();

history对象的length属性

作用：保存着历史记录的数量，所有向后和向前的记录。

对于加载到窗口、标签页或框架中的第一个页面而言，history.length = 0。
作用：下面这样测试该属性的值，可以确定用户是否一开始就打开了所创建的页面

if (history.length == 0){
    //这应该是用户打开窗口后的第一个页面
}

当页面的 URL 改变时，就会生成一条历史记录。
在 IE8 及更高版本、 Opera、Firefox、 Safari 3 及更高版本以及 Chrome 中，这里所说的改变包括 URL 中 hash 的变化（因此，设置 location.hash 会在这些浏览器中生成一条新的历史记录）。

菜鸟Player

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2021-06-16 # BOM的使用学习笔记

Content

BOM的使用

BOM（浏览器对象模型）

1.1 window对象

1.1.1 定义全局变量与在 window 对象上直接定义属性的差别

1.1.2 窗口关系及其框架

window.frames[]和<frame></frame>

【没懂？？？👇】

1.1.3 窗口位置

1.1.4 窗口的大小

innerWidth、innerHeight、outerWidth、outerHeight

1.1.5 导航和打开窗口

window.open（）

1. 弹出窗口

2. 安全限制

3. 弹出窗口屏蔽程序

1.1.6 间歇调用和超时调用

1. 超时调用

【没懂？？？👇】

（1）调用setTimeout()方法

2.间歇调用

（1）调用setInterval()方法

1.1.7 系统对话框

1. alert()[略]

3. confirm()[略]

2. prompt()[略]

4. window.print()和window.find()

1.2 location 对象

1.2.1 查询字符串参数

location.search

【没懂？？？👇】

1.2.2 位置操作

①使用assign()方法并为其传递一个 URL

②通过将hash、search、 hostname、 pathname 和 port 属性设置为新值来改变 URL。

③reload()

【没懂？？？👇】

1.3 navigator 对象

1.3.1 检测插件 P212

1.3.2 注册处理程序 P213

1.4 screen 对象[目前用处不大]

1.5 history 对象

go()方法

back()和 forward()方法

history对象的length属性

window.frames[]和`<frame></frame>`