2015-02-09 87 views
3

把你的图片:你能使用JavaScript来检测用户是否关闭了浏览器选项卡吗?关闭浏览器?或已经离开浏览器?

  • 用户是在移动设备上,并正在寻找在一个浏览器(例如Safari在iPhone上)
  • 他们可以看到密码字段,以创建一个密码模式框
  • 如果用户要关闭模式框并从浏览器中出来,我想向他们发送一封电子邮件以提示他们创建密码。

我最初的想法是必须有某种java脚本事件才能够做到这一点?

这样你就可以检测与JavaScript的一个地方用户有下列用户操作: - 关闭了一个标签 - 关闭了浏览器 - 离开了他们的浏览器

+1

这也许? https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers.onbeforeunload – 2015-02-09 11:18:00

+0

这种“自动annoyer”应该重新考虑...... – 2015-02-09 11:20:36

+0

您可以随时在用户的浏览器中设置一个cookie记录他们是否已经注册。 – kontur 2015-02-09 11:22:26

回答

1

简短的回答是不是真的,没有。长的回答是有一个onunload事件,但你可以用它做的所有事情是询问用户他们是否确定他们想离开(参见@EvanKnowles的评论),但你不能附加任何复杂的逻辑。

最好的方法是有一些会话计时器,它会在您上次看到您的网站上次后N分钟发送一封电子邮件。

+0

这个答案涵盖了所有。这基本上不可能像你现在想要的那样。除此之外,请不要这样做。只需通过cookie或某个服务器端检查(如果用户尝试登录,但没有密码,显示框),再次访问模式框时再次显示该模式框。不要发送电子邮件(或使用弹出窗口)。 – 2015-02-09 11:24:35

1

如果你的用户关闭了一个标签,你可以用onunload事件来检测它,但是当她关闭浏览器时,你的javascript引擎也会中止,因此你不能再在客户端运行任何类型的程序。

但是,您可以在服务器上检测到它。例如,如果您准备了websocket连接,则可能会检测到客户端何时退出,然后执行所需的操作。

这个过程是这样的:在进入页面时,建立一个自动websocket连接到你的服务器。如果需要,可以在输入电子邮件时阅读电子邮件(也可以通过websocket事件将其发送到服务器),最后,当“disconnect”事件触发时,将电子邮件发送到该地址。

如果您想以这种方式进行操作,您可能需要查看Socket.IO webpage,这对我来说是实现此过程的最简单方法之一。

3

也在寻找问题,但你不会满足需求。

我刚刚发现了如何解决这个问题:“您可以使用JavaScript来检测用户是否关闭了浏览器选项卡?关闭浏览器?或者已经离开浏览器?

<html> 
<head> 
<title>Detecting browser close</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
var validNavigation = false; 

function wireUpEvents() { 
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation 
var leave_message = 'ServerThemes.Net Recommend BEST WEB HOSTING at new tab window. Good things will come to you' 
function goodbye(e) { 
if (!validNavigation) { 
window.open("http://serverthemes.net/best-web-hosting-services","_blank"); 
    return leave_message; 

} 
} 
window.onbeforeunload=goodbye; 

// Attach the event keypress to exclude the F5 refresh 
$(document).bind('keypress', function(e) { 
if (e.keyCode == 116){ 
    validNavigation = true; 
} 
}); 

// Attach the event click for all links in the page 
$("a").bind("click", function() { 
validNavigation = true; 
}); 
// Attach the event submit for all forms in the page 
$("form").bind("submit", function() { 
validNavigation = true; 
}); 

// Attach the event click for all inputs in the page 
$("input[type=submit]").bind("click", function() { 
validNavigation = true; 
}); 

} 

// Wire up the events as soon as the DOM tree is ready 
$(document).ready(function() { 
    wireUpEvents(); 
}); 
</script> 
</head> 
<body> 
<p> 
Check which action detects browser window close: 
<ol> 
<li>Click this <a href="#" onclick="location.reload();return false">Refresh</a> link or the browser's Refresh button</li> 
<li>Navigate away from this page through a <a href="http://serverthemes.net/">link</a></li> 
<li>Type another URL in the address bar</li> 
<li>Click Back or Forward button</li> 
<li>Click the Close (X) button in the top-rightmost corner of the browser</li> 
<li>Click the IE icon in the top-leftmost corner and choose Close. Or simply double-click the icon</li> 
<li>Press Alt+F4 key</li> 
</ol> 
</p> 
    <p>In IE, the last 3 actions are correctly detected by the <a href="#" onclick="alert(doUnload);return false">javascript code</a> inside this page as browser close.</p> 
    </body> 
    </html> 
+0

是否与Alt-F4相同,并关闭导航器(选项卡或X)以及F5键,回发并重新加载? – Kiquenet 2015-07-08 10:37:01

+0

此解决方案是否也适用于移动浏览器?我对此表示怀疑。 – Black 2016-04-12 11:45:51