Top Menu

体验高德地图收藏夹新功能

高德地图在原有系统就默认收藏夹的功能基础上,开发了多收藏列表和分享收藏列表的功能,基于新功能,可以实现对不同的场景下的收藏地点进行分类,解决了用户收藏越来越多缺乏有效管理使用率降低的问题。另外,对于用户精心整理的收藏列表,也可以进行公开分享,提高用户收藏夹的价值,也提高了用户整理收藏夹的积极性。

Continue Reading 0

如何捕获离开当前页面的浏览器按钮行为

有一个需求是需要在用户离开页面的时候对用户数据进行异步保存,但是在何时是一个触发点能够判断用户离开了页面,是一个问题,在Chrome浏览器中,通过以下按钮都会触发这个行为

触发离开页面的浏览器行为包括

  • 点击后退、前进
  • 点击刷新
  • 点击主页
  • 点击关闭标签页
  • 点击关闭浏览器

Chrome中可以通过beforeunload这个EventListener对用户的浏览器行为进行监听,一旦监听到事件,就触发行为。

在这个行为中,可以附加一个Chrome系统行为,既通过event.preventDefault();来告诉浏览器弹出离开页面的提示框,但是这个提示是有选项的,在获取到beforeunload的时候,其实用户并没有实际离开,只能判断用户试图离开页面。

何时是用户真的离开页面?需要通过监听unload事件,unload事件的触发事件是在用户点击了离开页面的按钮后触发,这时用户才真正决定离开页面。

需要注意的是,在Chrome中,当用户点击刷新并点击离开按钮后,其实还是回到了当前页面,这时候,当用户后续再次点击刷新,是不会有任何的系统弹框的,除非用户通过Ctrl+R进行刷新才会有提示离开弹框。这个在console中可以看到相应的Chrome官方解释文档。

Demo

Demo:https://811106.playcode.io/

IDE:https://playcode.io/811106/

demo中,用了两个alert和console来打印触发的状态,在chrome中,alert会被拦截,所以只有console会触发。

window.addEventListener('beforeunload', (event) => { alert("beforeunload"); console.log('beforeunload') // Cancel the event as stated by the standard. event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = ''; }); window.addEventListener('unload', (event) => { alert("onunload"); console.log('onunload') }); console.log('App started')

Continue Reading 0

Powered by WordPress. Designed by WooThemes