JavaScript

JavaScript 知识量:26 - 101 - 483

11.4 其他对象><

screen对象- 11.4.1 -

screen 对象在 JavaScript 中是一个全局的,不可变的对象,它提供了有关用户屏幕的信息。这个对象为开发者提供了一种方式来获取关于客户端(通常是浏览器)屏幕的信息,例如屏幕的宽度和高度等。

screen 对象的一些常用属性包括:

  • screen.width:返回屏幕的宽度(以像素为单位)。

  • screen.height:返回屏幕的高度(以像素为单位)。

  • screen.availWidth:返回屏幕的可用宽度(以像素为单位),这个值通常用于确定浏览器窗口的可滚动区域。

  • screen.availHeight:返回屏幕的可用高度(以像素为单位),这个值同样通常用于确定浏览器窗口的可滚动区域。

  • screen.colorDepth:返回屏幕的颜色深度,以位为单位。

  • screen.pixelDepth:返回屏幕的像素深度,以位为单位。

以下是一个使用 screen 对象的例子:

console.log("Screen width: " + screen.width);    
console.log("Screen height: " + screen.height);    
console.log("Screen available width: " + screen.availWidth);    
console.log("Screen available height: " + screen.availHeight);    
console.log("Screen color depth: " + screen.colorDepth);    
console.log("Screen pixel depth: " + screen.pixelDepth);

需要注意的是,因为 screen 对象提供的是客户端(通常是浏览器)窗口的相关信息,所以该对象并不能获取到用户实际屏幕的完全信息。例如,如果用户在一个特定的应用程序中打开浏览器,并且该应用程序已经全屏显示,那么 screen.width 和 screen.height 可能并不能准确反映整个屏幕的大小。

history对象- 11.4.2 -

在JavaScript中,history 对象提供了与浏览器的历史记录(session history)交互的接口。这个对象是 Window 对象的一部分,可以通过 window.history 来访问。

history 对象有以下几个主要的方法和属性:

方法:

  • history.back(): 相当于点击浏览器的后退按钮。它会更改浏览器的历史记录,并重新加载当前页面的内容。

  • history.forward(): 相当于点击浏览器的前进按钮。它会更改浏览器的历史记录,并重新加载当前页面的内容。

  • history.go(n): 这个方法会改变浏览器的历史记录,并重新加载当前页面的内容。参数 n 是相对于当前页面的位置,向前或向后跳转的步数。例如,history.go(-1) 相当于 history.back(),history.go(1) 相当于 history.forward()。

属性:

  • history.length: 这个属性返回浏览器历史列表中的URL数量。

  • history.scrollRestoration: 这个属性用于设置或返回浏览器在历史记录导航中应如何滚动到目标页面。可以设置为 "auto" 或 "manual"。

以下是一个简单的示例,这个示例使用 history 对象来回退和前进浏览器历史记录:

// 监听点击事件  
document.getElementById('backButton').addEventListener('click', function() {  
    history.back();  
});  
  
document.getElementById('forwardButton').addEventListener('click', function() {  
    history.forward();  
});

在这个示例中,当用户点击 "backButton" 时,浏览器会返回到前一页(如果存在)。当用户点击 "forwardButton" 时,浏览器会前进到下一页(如果存在)。

另一个常见的用途是使用 history.pushState() 方法来改变浏览器的URL,同时不刷新页面。例如:

// 监听点击事件  
document.getElementById('changeURLButton').addEventListener('click', function() {  
    let newState = {  
        "name": "new page",  
        "url": "new-page-url"  
    };  
    history.pushState(newState, newState.name, newState.url);  
});

在这个示例中,当用户点击 "changeURLButton" 时,浏览器的 URL 会被改变为 "new-page-url",但页面不会刷新。history.pushState() 的第一个参数是一个用于操作用户历史记录的新状态对象,第二个参数是此状态的标签(在新浏览器标签或选项卡上显示给用户的文本),第三个参数是此状态对应的 URL。

注意:出于安全和隐私考虑,许多浏览器的历史 API 功能已经被限制或禁用。例如,不能使用这个 API 去查看用户在浏览器中访问过的其他站点,也不能修改浏览器的历史记录列表。这些限制可能会随着浏览器版本的更新而变化,因此在编写代码时,最好先了解清楚这些限制。