js抓取网页内容(浏览器中有没有，*敏*感*词*到页面的生命周期，如何解决？)

　　js抓取网页内容(浏览器中有没有，*敏*感*词*到页面的生命周期，如何解决？)

　　这篇文章的速度只需要一分钟

　　在做业务开发的时候，遇到了以下问题：

　　在一些浏览器中，比如Safari，当从下一页返回到上一页时，页面不刷新，而是保持页面的最后状态。这样如果用户不知道已经提交了，就有可能再次提交，导致用户体验差等。

　　那么如何解决这个问题呢？很容易想到，如果我们能像开发原生应用一样监控页面的生命周期，那么这个问题自然就迎刃而解了。

　　那么浏览器中的页面有生命周期方法吗？其实没有，但是有类似功能的事件可以帮助我们解决问题

　　浏览器页面事件

　　浏览器页面事件如下：

　　这些事件描述如下：

　　负载

　　此事件在页面首次加载时触发，而不是在从浏览器缓存中读取页面时触发

　　window.onload = (e) => {

alert('page onload')

}

　　onpageshow

　　每次页面加载时都会触发这个事件，也就是说，即使页面是从浏览器读取的，这个事件也会触发

　　机智的小伙伴们一定想到了，我们可以通过这个方法来判断返回的页面是否是缓存中直接读取的页面

　　但是还有一个问题。虽然每次都会触发onpageshow，但是如何判断是否从缓存中读取呢？请看下面的代码：

　　window.onpageshow = (e) => {

if (e.persisted) {

alert('page read from cache')

window.location.reload()

}

　　上面代码中，是否从缓存中读取是由事件对象的persisted属性来判断的，它会返回true或者false

　　但并不是所有的浏览器都需要添加这个方法。现在很多浏览器返回后会自动刷新，所以我们只需要对那些不会刷新的浏览器使用这个方法即可。

　　onpagehide 和 onunload

　　离开页面时会触发这两个事件。不同的是，触发onpagehide后页面仍然可以缓存，而触发onunload后页面不能缓存。

　　如果同时使用这两种方法，你会发现在onunload之前会触发onpagehide，并且两个事件都不能使用alert

　　卸载前

　　页面关闭前触发的事件是在上述两个离开页面事件之前触发的，也不能使用alert

　　浏览器页面事件的触发顺序

　　onload -> onpageshow -> onbeforeunload -> onpagehide -> onunload

　　一分钟结束。小伙伴们下周见！:)