十、JavaScript BOM对象

最新推荐文章于 2024-09-14 18:52:56 发布

HJHO

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量55

点赞数

分类专栏： JavaScript高级文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120706949

版权

JavaScript高级专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浏览器对象模型--Browser ObjectModel (BOM)。

1.window属性

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight （内容的高度）
document.body.clientWidth

代码例👇

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
//确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
var w=window.innerWidth || 
  document.documentElement.clientWidth || 
  document.body.clientWidth;
var h=window.innerHeight || 
  document.documentElement.clientHeight ||
  document.body.clientHeight;
window.alert(w+"*"+h);   
}
</script>
</head>
<body>
</body>
</html>

2.常用的对话框

prompt（输入框）
confirm（确认框）
alert（警告框）

onload : 页面加载完成之后执行

所有的元素都有onload

页面加载完成页面上所有的元素创建完毕，并且引用外部的资源下下载完毕（js.css.图片）；
```
window.onload = function(){
// 页面加载完成  页面上所有的元素创建完毕，并且引用外部的资源下下载完毕（js.css.图片）；
    // 可以省略window
}
```
onunload : 页面卸载的时候执行

window.onunload = function(){
//在onunload中所有的对话框都无法执行window 对象会被冻结
}

f5 刷新页面的步骤：

1. 卸载页面

2. 重新加载

3.location对象

常用的方法

1.location.href = '地址'-----跳转的路径

//assign 委派
    // 作用 ：和href的作用一样，可以让你哥页面跳转到制定的地方。
2. location.assign('地址')

// 直接把地址替换不记录历史不能反回。
3. location.replace('替换的地址')

//参数 true 强制从服务器获取数据， false  如果浏览器有缓存的话，直接从服务器缓存中加载。
4. location.reload(boolean);

url : 统一资源定位符（网址）

url 组成： scheme://host:port/path?query#fragment

scheme:通讯协议 http https ftp maito登
host：主机服务器（计算机）域名系统（DNS）主机名或IP地址
port：端口号整数，可选。省略时使用方案为默认端口，比如http默认端口号为80.
path：路径由零或者多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query：查询可选，用于给动态网页传递参数，可以有多个参数，用 & 符号隔开，每个参数的名和值用 = 隔开，例如 name=zs&age=18
fragment:信息片段字符串，锚点

4.history 历史

1.window.history.forword();---------前进按钮。

2.window.history.back()；-----------后退按钮。

3.window.history.go(正负数)

当-1时就和back() 一样。

当+1时就和forward（）一样。

navigator.userAgent : 获取的系统版本，和手机版本。

5.计时器

setTimeout( fn,time ) :隔一段时执行，并且只会执行一次。--------类似炸弹

第一个参数：函数。

注意：为函数名不能带（）如果带（）会将函数进行执行，然后将函数的返回值作为第一个参数进行执行除非有treturn 返回值。

第二个参数：时间。

var tiemrId = setTimeout(function(){
//  创建定时器，并且setTimeout有返回值
},3000);
//setTimeout
/*第一个参数为函数。 为函数名   不能带（） 如果带（）会将函数进行执行，然后将函数的返回值作为第一个参数 进行执行  除非有treturn 返回值。
第二个参数为时间。
*/
//取消定时器
clearTimeout(timerId);

setInterval( )：隔一段时间执行，并且会重复执行。---------类似闹钟

第一个参数：函数。

第二个参数：时间。
```
var tiemrId = setInterval(function(){
//  创建定时器，并且setInterval有返回值
},3000);
```
无奈源于不够强大