BOM基础知识_bom程序-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48839439/article/details/126544198

BOM全Browser Object Model 。 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。 BOM 的核心是 window 对象，表示浏览器的实例。

一、window窗口

screenLeft（火狐浏览器不支持）	返回窗口相对于屏幕的x坐标
screenTop（火狐浏览器不支持）	返回窗口相对于屏幕的y坐标
screenX (ie浏览器不支持）	返回窗口相对于屏幕的x坐标
screenY (ie浏览器不支持）	返回窗口相对于屏幕的y坐标
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
screen.width	屏幕总宽度
screen.height	屏幕总高度
screen.availWidth	可用宽度
screen.availHeight	可用高度
screen.colorDepth	颜色深度
screen.pixelDepth	颜色分辨率
innerWidth	页面视图区的宽度
innerHeight	页面视图区的高度
outerWidth	浏览器窗口的宽度
outerHeight	浏览器窗口的高度

二、Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。

这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。最后一个参数只有在不打开新窗口时才会使用。

window.open(URL,name,specs,replace)

例子：

newWindow = window.open('https://fontawesome.dashgame.com/', '_blank', 'width=300px,height=300px')

name：指定target属性或窗口名称。其值可以为：_blank - URL加载到一个新的窗口。（默认）；_parent - URL加载到父框架；_self - URL替换当前页面；_top - URL替换任何可加载的框架集；name - 窗口名称。

replace：其值可为：true - URL 替换浏览历史中的当前条目；false - URL 在浏览历史中创建新的条目。

specs：其值可为：

hannelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

三、系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。

这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

alert('警告！')

  var result = confirm('请确认消息');
  if (result) {
    console.log('确定');
  }else{
    console.log('取消');
  }

var result = prompt("请输入你的答案");
  if (result) {
    console.log(result);
  }else{
    console.log('取消');
  }

四、location

location提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

location的一些方法：

assign()：传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace()：参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload()：重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

例如，使用刷新页面方法：

<body>
<button>刷新</button>
  <script>
    var btn = document.getElementsByTagName('button')
    // 刷新页面
    btns[0].onclick = function () {
      location.reload('./xxx.html')
    }
  </script>
</body>

五、history

该对象保存着用户上网的历史记录。有以下方法：

length：返回历史列表中的网址数注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back()：加载 history 列表中的前一个 URL

forward()：加载 history 列表中的下一个 URL

go()：加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

例如，使用back（）方法：

<body>
<button>返回上一页</button>
  <script>
    var btn = document.getElementsByTagName('button')
    // 上一页
    btns[0].onclick = function () {
      history.back()
    }
  </script>
</body>

六、超时调用和间歇调用

1、setTimeout() 超时调用

id是执行超时调用的唯一标识符；如想取消调用可以使用clearTimeout(ID)。

此方法参数有要执行的代码(类似一个立即执行函数的格式)、超时时间（单位为毫秒。如数值是1000时，超时1s）。

  //使用超时调用 
  var id = setTimeout(() => {
    console.log(alert('hahaha')); //打开窗口1s后模态框弹出，内容为"hahaha"
  }, 1000);
  console.log(id);
  // 清除超时调用
  clearTimeout(id);

2、setInterval() 间歇调用

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。

调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

此方法的参数为：要执行的代码、间隔时间（单位也是毫秒）

//间歇调用  
var id = setInterval(() => {
      console.log('我是一个输出语句');
      console.log(new Date().toLocaleString());
    }, 3000);
//清除间歇调用
 clearInterval(id)