深入解读pageshow

一、pageshow事件是什么

在Web页面生命周期中，页面的展示和隐藏往往需要不同的处理方式。而pageshow事件就是在页面展示的时候触发的事件，它与页面隐藏时的pagehide事件相对应。pageshow事件常用于在页面显示后加载新的内容、更新数据等操作。

二、pageshow挂载多次

在一些情况下，我们可能需要多次绑定pageshow事件来实现不同的逻辑处理。例如，在单页面应用程序中，我们可能需要在不同的页面中监听pageshow事件，以实现页面切换时的数据和视图更新。此时，我们需要使用addEventListener方法来绑定该事件：

document.addEventListener('pageshow', function(event) {
  console.log('页面展示了');
});

当我们需要在多个页面中监听同一事件时，也可以使用类似于事件委托的方式，将pageshow事件绑定在父元素上：

var parent = document.querySelector('.page-wrap');
parent.addEventListener('pageshow', function(event) {
  console.log('页面展示了');
});

三、pageshow事件兼容

在各种浏览器中，pageshow事件的兼容性并不相同。在一些老旧的浏览器中，可能并不支持pageshow事件，而在一些移动端浏览器中，该事件的触发机制也与桌面端浏览器稍有不同。

为了确保pageshow事件的正确触发，在绑定该事件时，我们需要判断使用浏览器是否支持该事件，如果不支持，我们可以尝试使用旧的事件名（例如onload）来实现相同的效果：

if ('pageshow' in window) {
  window.addEventListener('pageshow', function(event) {
    console.log('页面展示了');
  });
} else {
  window.addEventListener('load', function(event) {
    console.log('页面展示了');
  });
}

四、pageshow事件不触发

在一些情况下，可能会出现pageshow事件无法触发的情况。其中最常见的原因是页面使用了缓存，导致页面没有真正地加载。此时，我们可以使用pageshow事件的persisted属性来判断页面是否是从浏览器缓存中加载的：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log('从缓存中加载页面');
  } else {
    console.log('页面重新加载');
  }
});

五、pageshow只执行一次

在一些场景下，我们可能需要pageshow事件仅执行一次，例如在页面初次加载时进行数据初始化。此时，我们可以使用一次性事件绑定的方法（即绑定事件后立即解绑该事件）来实现：

function init() {
  console.log('页面初始化');
  window.removeEventListener('pageshow', init);
}
window.addEventListener('pageshow', init);

这里通过addEventListener方法绑定一个一次性事件init，当该事件执行时，它会解绑pageshow事件。

六、pageshow只触发一次

在一些情况下，我们需要确保pageshow事件仅在页面初次显示时触发，而在页面重新显示（例如用户按下前进、后退按钮时），不再触发。此时，我们可以使用一次性的事件绑定方法和一个标记变量来实现：

var hasLoaded = false;
function init() {
  console.log('页面初始化');
  window.removeEventListener('pageshow', init);
}
window.addEventListener('pageshow', function(event) {
  if (!hasLoaded) {
    hasLoaded = true;
    init();
  }
});

这里定义了一个标记变量hasLoaded，表示页面是否已经被初次加载过。在pageshow事件被触发时，我们检查这个变量是否为false，如果是，则表示页面初次加载，我们执行初始化操作并将标记变量设置为true，否则表示页面已经被加载过（可能是从缓存中加载），不再执行初始化操作。

七、pageshow画面加载完触发

在一些场景下，我们可能需要在页面画面加载完毕后执行一些操作，例如，测量页面元素布局尺寸等。此时，我们可以使用DOMContentLoaded事件（即页面DOM结构加载完成后立即触发的事件）和pageshow事件配合使用：

document.addEventListener('DOMContentLoaded', function(event) {
  console.log('DOM结构加载完成');
});
window.addEventListener('pageshow', function(event) {
  console.log('页面展示了');
});

这里通过绑定DOMContentLoaded事件和pageshow事件，分别在DOM结构和页面展示时触发相应的操作。

八、pageshow pagehide

除了pageshow事件外，还有一个相对应的事件pagehide，用于在页面隐藏时执行相应的操作。例如，我们可以在页面隐藏时保存用户当前的阅读进度或表单数据：

window.addEventListener('pagehide', function(event) {
  console.log('页面隐藏了');
  saveFormData();
});

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243330.html