Javascript学习笔记4 BOM

傷城~ 2022-05-29 05:45 180阅读 0赞

# window对象 #

**BOM：浏览器对象模型，其核心对象是window，表示浏览器的一个实例。其作为Global对象，在全局作用域中声明的变量和函数都会变成window对象的属性和方法**

> 每个框架都具有自己的 **window** 对象，并且保存在 **frames** 集合中，且每个window对象都有一个 **name** 属性，其中包含着框架的名字。 **top** 对象始终指向最外层的框架(浏览器窗口)，而 **parent** 对象始终指向当前框架的直接上层框架，在没有框架的情况下，top等于parent。 **self** 对象始终指向window

frames[0],frames[1]...
    frames["name"]
    top.frames[0]
    window.frames[0]

**窗口位置：`screenLeft`和`screenTop`属性（相对屏幕左边和上边的位置），或者screenX和screenY。`moveTo(x,y)`移动窗口至新的x，y坐标，`moveBy(x_relative,y_relative)`水平和垂直方向上的移动像素值**

**窗口大小：`innerWidth`和`innerHeight`属性（页面视图大小），`outerWidth`和`outerHeight`浏览器窗口本身大小。`resizeTo(x,y)`改变窗口大小至新宽度和高度，`resizeBy(x_relative,y_relative)`水平和垂直方向上新窗口和原窗口的宽度和高度差**

**打开窗口**

window.open(url,窗口目标,特性字符串,表示新页面是否取代浏览器浏览记录中当前加载页面的布尔值);
    窗口目标:_self（自身）,_parent（父窗口）,_top（浏览器窗口）,_blank（新的空白窗口）或新窗口的名称字符串
    new_window = window.open("https://www.zjw666.top");
    new_window.close()  //只能关闭使用open方法打开的窗口

**超时调用和间歇调用**

window.setTimeout(执行的代码，毫秒为单位的时间值)；
    var timeoutId = window.setTimeout(function(){ alert("zjw");},1000);  //在1秒之后调用
    window.clearTimeout(timeoutId);   //取消尚未执行的超时调用

window.setInterval(执行的代码，毫秒为单位的时间值);
    var timeoutId = window.setInterval(function(){ alert("zjw");},1000);  //每隔1秒重复调用
    window.clearInterval(timeoutId);   //取消间歇调用

**系统对话框**

alert()   //接受一个字符串并显示给用户，
    confirm()   //接受一个字符串，根据用户选择返回true或false
    prompt(） //用于提示用户输入一些文本，返回输入值或null

# location对象 #

**最有用的BOM对象之一，其即是window对象的属性，也是document对象的属性**

**location对象属性**

<table> 
 <tbody> 
  <tr> 
   <td>属性名</td> 
   <td>例子</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>hash</td> 
   <td>#contents</td> 
   <td>返回URL的hash（#号后跟的字符）</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>“www.zjw.com:80”</td> 
   <td>服务器名称和端口</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>“www.zjw.com”</td> 
   <td>不带端口号的服务器名称</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>“https://www.zjw666.top”</td> 
   <td>返回完整的URL</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>“/zjwfile/”</td> 
   <td>返回URL中文件目录和文件名</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>“8080”</td> 
   <td>返回URL中的端口号，若没有，则返回空字符串</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>“http:”</td> 
   <td>返回协议</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>“?q=javasrcipt”</td> 
   <td>返回URL中的查询字符串</td> 
  </tr> 
 </tbody> 
</table>

*  可以更改**location**或location的**href**属性来改变当前加载的页面

window.location = "www.zjw666.top"
    或location.href = "www.zjw666.top"

*  使用`replace()`方法避免生成历史记录（不能使用后退按钮）

window.location.replace("www.zjw666.top");

*  使用`reload()`方法重新加载页面

window.location.reload（）; //当接受true关键字时，表示从服务器而不是从缓存中重新加载

# history对象 #

保存着用户上网记录，可以使用`go()`方法在记录中任意跳转

history.go(-1); //回退1页
    history.go(1);  //前进一页
    history.go(2);  //前进两页
    history.go("www.zjw666.top")  //历史记录中包含该字符串的位置
    history.length //历史记录的数量