项目需要监听页面关闭的时候对用户进行提醒
方案一 onbeforeunload
主要使用了window对象的onbeforeunload方法。
window.onbeforeunload = function(e) {
console.log('beforeunload')
return 1;
};
onbeforeunload方法在以前（旧版本的浏览器中），可以自定义提示文案
但在新版本的浏览器中，为了安全性，已经不支持自定义弹窗
诸如自定义实现“用户离开页面，弹窗自定义提示是否离开，点击取消不离开，点击确认离开后离开页面”的需求已无法实现目前能做的，只是调用浏览器自带的提示确认窗口
目前来说，只能这样控制是否显示系统的页面离开确认。
要注意的是，只有以下情况不会弹出确认窗格
- 不return
- return;
- return undefined;
- return null;
而返回其他任意值都会弹出，如
- return '';
- return false;
- return 0;
- return 1; 等等
各自浏览器的样式
Chrome浏览器样式
Chrome浏览器样式
FireFox浏览器样式
IE浏览器样式
方案二 exit-intent-popup
该开源库通过监听鼠标是否移出窗口的导航栏来判断用户的退出意图，从而提示用户，但是不能阻止用户关闭窗口。
引入对应 js 文件 然后通过 bioEp.init 初始化。如果单独直接使用的话，option 中必须得有 html 的配置，否则弹出窗口将为空。
<script type="text/javascript" src="bioep.min.js"></script>
<script type="text/javascript">
bioEp.init({
// Options
});
</script>
同样还可以直接在页面上添加弹窗自定义的样式 CSS 和 html。但是弹窗的 html 的 div 的 id 必须为 bio_ep 对应的 css 选择器如下
<head>
<style type="text/css">
#bio_ep_bg {
} // background
#bio_ep {
} // popup
#bio_ep_close {
} // close button
</style>
</head>
<body>
<div id="bio_ep">
<!-- your popup HTML goes here -->
</div>
</body>
配置模版 演示dmeo
bioEp.init({
html:
'<div id="bio_ep_content">' +
'<img src="http://beeker.io/images/posts/2/tag.png" alt="Claim your discount!" />' +
"<span>HOLD ON!</span>" +
"<span>Click the button below to get a special discount</span>" +
"<span>This offer will NOT show again!</span>" +
'<a href="#YOURURLHERE" class="bio_btn">CLAIM YOUR DISCOUNT</a>' +
"</div>",
css:
"#bio_ep {width: 400px; height: 300px; color: #333; background-color: #fafafa; text-align: center;}" +
'#bio_ep_content {padding: 24px 0 0 0; font-family: "Titillium Web";}' +
"#bio_ep_content span:nth-child(2) {display: block; color: #f21b1b; font-size: 32px; font-weight: 600;}" +
"#bio_ep_content span:nth-child(3) {display: block; font-size: 16px;}" +
"#bio_ep_content span:nth-child(4) {display: block; margin: -5px 0 0 0; font-size: 16px; font-weight: 600;}" +
".bio_btn {display: inline-block; margin: 18px 0 0 0; padding: 7px; color: #fff; font-size: 14px; font-weight: 600; background-color: #70bb39; border: 1px solid #47ad0b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-decoration: none;}",
fonts: ["//fonts.googleapis.com/css?family=Titillium+Web:300,400,600"],
cookieExp: 0,
});
弹出图片
bioEp.init({
width: 394,
height: 298,
html:
'<a href="#YOURURLHERE" title="Claim your discount!"><img src="http://beeker.io/images/posts/2/template2.png" alt="Claim your discount!" /></a>',
cookieExp: 0,
});
网友评论