JS--JavaScript中的History对象API、screen对象的API、设置弹出窗口居中

雨点打透心脏的1/2处 2021-08-13 22:58 300阅读 0赞

#### history对象 ####

history对象存储浏览器窗口的浏览历史，通过window对象的history属性可以访问该对象。实际上，history对象存储最近访问的、有限条目的URL信息。为了保护客户端浏览信息的安全和隐私，history对象禁止JavaScript脚本直接操纵这些访问信息。

History对象允许使用length属性读取列表中URL的个数，并可以调用back()、forward()和go()方法访问数组中的URL。

*  **back()：**  
    返回到前一个URL
 *  **forward()：**  
    访问下一个URL
 *  **go()：**  
    该方法比骄傲灵活，它能够根据参数决定可访问的URL。
    
    1.  如果参数为正整数，浏览器就会在历史列表中向前移动；如果参数值为负整数，浏览器就会在历史列表中向后移动。例如，history.go(-1)等价于history.back()，而hisroty.go(1)等价于history.forward()，history.go(0)等价于刷新页面。
    2.  如果参数为一个字符串，则history对象能够从浏览历史记录中检索包含该字符串的URL，并访问第一个检索到的URL。

history.back()和hisroty.forward()与浏览器软件中的“后退”和“向前”按钮功能一致。每个窗口都有独立的历史记录，并通过独立的history属性引用。当打开浏览器新建窗口时，由于历史记录为空，所以对应的方法都是无效的。

访问框架（frame）的历史记录一般可以通过下面的方法实现：

frames[n].history.back();
    frames[n].history.forward();
    frames[n].history.go(int);

#### screen对象 ####

screen对象存储客户端屏幕信息，如下表。这些信息可以用来探测客户端硬件的基本配置。利用screen对象可以优化程序的设计，满足不同用户的显示要求。

**screen对象属性：**

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">availHeight</td> 
   <td align="center">返回显示屏幕的高度（除windows任务栏之外）</td> 
  </tr> 
  <tr> 
   <td align="center">availWidth</td> 
   <td align="center">返回显示屏幕的宽度（除window任务栏之外）</td> 
  </tr> 
  <tr> 
   <td align="center">bufferDepth</td> 
   <td align="center">设置或返回掉色版的比特深度</td> 
  </tr> 
  <tr> 
   <td align="center">colorDepth</td> 
   <td align="center">返回目标设备或缓冲器上的调色板的比特深度</td> 
  </tr> 
  <tr> 
   <td align="center">deviceXDPI</td> 
   <td align="center">返回显示屏幕的每英寸水平点数</td> 
  </tr> 
  <tr> 
   <td align="center">deviceYDPI</td> 
   <td align="center">返回显示屏幕的每英寸垂直点数</td> 
  </tr> 
  <tr> 
   <td align="center">fontSmoothingEnabled</td> 
   <td align="center">返回用户是否在显示控制面板中启动了字体平滑</td> 
  </tr> 
  <tr> 
   <td align="center">height</td> 
   <td align="center">返回显示屏幕的高度</td> 
  </tr> 
  <tr> 
   <td align="center">logicalXDPI</td> 
   <td align="center">返回显示屏幕每英寸的水平方向的常规点数</td> 
  </tr> 
  <tr> 
   <td align="center">logicalYDPI</td> 
   <td align="center">返回显示屏幕每英寸的垂直方向的常规点数</td> 
  </tr> 
  <tr> 
   <td align="center">pixelDepth</td> 
   <td align="center">返回显示屏幕的颜色分辨率（比特每像素）</td> 
  </tr> 
  <tr> 
   <td align="center">updateInterval</td> 
   <td align="center">设置或返回屏幕的刷新率</td> 
  </tr> 
  <tr> 
   <td align="center">width</td> 
   <td align="center">返回显示器屏幕的宽度</td> 
  </tr> 
 </tbody> 
</table>

用户可以根据显示器屏幕大小选择使用图像的大小，或者根据显示器的颜色深度选择使用16色图像或8色图像，或者打开新窗口时设置居中显示。

示例：弹出窗口居中显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

注意：虽然使用screen对象的width和height属性可以实现，但是不同浏览器在解析时会存在一定的差异。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/5109968a42c74b2484d07790605e009b.png