screen 与 location 对象的属性与方法

screen 对象

screen对象提供了有关窗口显示的信息,常用来获取屏幕的宽度、高度以及色深等。下面是screen对象的一些常用属性:

// 获取屏幕宽度(单位为像素)
screen.width;

// 获取屏幕高度(单位为像素)
screen.height;

// 获取屏幕色深(单位为bit)
screen.colorDepth;

// 获取屏幕可用宽度(单位为像素)
screen.availWidth;

// 获取屏幕可用高度(单位为像素)
screen.availHeight;

// 监控屏幕方向(横屏或竖屏)
screen.orientation.type;

在实际开发中,我们可以利用screen对象的属性来适配不同尺寸的屏幕,以提升用户体验。例如,在移动端开发时,可以根据screen.width和screen.height来判断当前设备是手机还是平板,从而加载不同的样式文件。

此外,使用screen.orientation.type可以监控屏幕方向的变化,当屏幕从竖屏切换到横屏时,可以相应地调整页面布局,避免内容显示不全的问题。

location 对象

location对象提供了当前窗口中加载的文档的信息,以及通用的导航功能。下面是location对象的一些常用属性和方法:

// 获取/设置当前URL的协议名
location.protocol;

// 获取/设置当前URL的端口号
location.port;

// 获取/设置当前URL的路径部分
location.pathname;

// 获取/设置当前URL的主机名
location.hostname;

// 获取/设置当前URL的hash值
location.hash;

// 获取当前URL的查询字符串
location.search;

// 获取/设置当前完整的URL
location.href;

// 重新加载当前文档
location.reload();

// 加载一个新的文档
location.assign(url);

// 用新的文档替换当前文档
location.replace(url);

在单页应用(SPA)的开发中,location.hash经常被用来实现页面的无刷新跳转。通过改变hash值,可以在不重新加载页面的情况下,动态地更新页面内容,提升用户体验。

例如,可以在页面加载完成后,根据location.hash的值来决定显示哪个组件:

window.addEventListener('hashchange', function () {
  switch (location.hash) {
    case '#home':
      showHomePage();
      break;
    case '#about':
      showAboutPage();
      break;
    case '#contact':
      showContactPage();
      break;
    default:
      showHomePage();
  }
});

JavaScript-practise/BOM/hash at main · sumingcheng/JavaScript-practise