(十)JavaScript——BOM

最新推荐文章于 2023-03-11 01:18:56 发布

lyj_010

最新推荐文章于 2023-03-11 01:18:56 发布

阅读量295

点赞数 1

分类专栏： js学习文章标签： BOM

本文链接：https://blog.csdn.net/lyj_010/article/details/102789525

版权

js学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、BOM概念

　　BOM（browser object model），浏览器对象模型，BOM提供了独立于内容而与浏览器窗口进行交互的对象。BOM由多个对象组成，其中代表浏览器窗口的 window（别名为 top）对象，是BOM的顶层对象，其他对象都是该对象的子对象。所以，在调用window对象下的属性和方法时，可以省略window。（window API参考）

二、对话框

1、警告对话框

	window.alert(message);

　　显示一个警告对话框，上面显示有指定的文本内容以及一个"确定"按钮。

message：要显示在对话框中的文本字符串，如果传入其他类型的值，会转换成字符串。

2、模态对话框

	result = window.confirm(message);

　　显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。

message：要在对话框中显示的可选字符串；
result ：一个布尔值，表示是选择确定还是取消 (true表示OK)。

3、输入对话框

	result = window.prompt(text, value);

　　显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

result：用来存储用户输入文字的字符串，或者是 null；
text：用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写；
value：文本输入框中的默认值，该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中，省略该参数会导致输入框中显示默认值"undefined"。

三、页面加载事件

1、onload

	window.onload = funcRef;

　　一个事件处理程序用于处理Window， XMLHttpRequest， <img> 等元素的加载事件，当资源已加载完成时被触发。

2、onunload

	window.onunload = funcRef;

　　当页面关闭后，会触发unload事件。注意，谷歌不支持该事件。

3、onbeforeunload

	window.onbeforeunload= funcRef;

　　当窗口即将被卸载（关闭）时，会触发该事件。此时页面文档依然可见，且该事件的默认动作可以被取消。

示例代码：
　　当该事件返回的字符串（事前设置好的event.returnValue的值）不为null或者undefined时，弹出确认窗口让用户自行选择是否关闭当前页面。

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

四、location对象

　　window.location 只读属性，返回一个 Location 对象，其中包含有关文档当前位置的信息。

Location.href：包含整个URL的一个DOMString；
Location.protocol：包含URL对应协议的一个DOMString，最后有一个":"；
Location.host：包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号；
Location.hostname：包含URL域名的一个DOMString；
Location.port：包含端口号的一个DOMString；
Location.pathname：包含URL中路径部分的一个DOMString，开头有一个“/"；
Location.search：包含URL参数的一个DOMString，开头有一个“?”；
Location.hash：包含块标识符的DOMString，开头有一个“#”。

1、导航到新页面

　　只要赋给 location 对象或者 href 属性一个新值，文档就会使用新的 URL 加载。也可以使用assign()，加载给定URL的内容资源到这个Location对象所关联的对象上。

	window.location.assign("http://www.mozilla.org"); // or
	window.location = "http://www.mozilla.org"; // or
	window.location.href = "http://www.mozilla.org";

2、重载当前页面

　　重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

	window.location.reload(true);

3、重载页面

　　用给定的URL替换掉当前的资源。与 assign() 方法不同的是，用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

	window.location.replace(url);

五、history对象

　　DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。

1、向后跳转

　　和用户点击浏览器回退按钮的效果相同。

	window.history.back();

2、向前跳转

　　和用户点击浏览器前进按钮的效果相同。

	window.history.forward();

3、跳转到 history 中指定的一个点

　　可以用 go() 方法载入到会话历史中的某一特定页面，通过与当前页面相对位置来标志 (当前页面的相对位置标志为0).

	// 向后移动一个页面 (等同于调用 back()):
	window.history.go(-1);
	// 向前移动一个页面, 等同于调用了 forward():
	window.history.go(1);

六、history对象

　　Navigator 接口表示用户代理的状态和标识，可以使用只读的 window.navigator 属性检索navigator对象。

NavigatorID.platform：只读，返回浏览器平台名，不确定此值是否有效；
NavigatorID.userAgent：只读，返回当前浏览器的用户代理。

七、定时器

1、设置定时器

　　setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。

	var intervalID = scope.setInterval(func, delay, [arg1, arg2, ...]);
	var intervalID = scope.setInterval(code, delay);

func：要重复调用的函数。
code：这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每个delay毫秒时间内执行一次。这个语法因为存在安全风险所以不被推荐使用。
delay：每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。
arg1, …, argN：可选，计时器到期后，将传递给func指定的函数的其他参数。
intervalID ：返回的intervalID是一个非零的数字值，它标识通过调用setInterval()创建的计时器。