当我听到这个问题时,感觉它几乎不可能实现。我知道在离开网页时可以显示一个对话框进行确认。但是,在离开整个站点时显示对话框是否可行呢?
我一直没有找到/创建任何东西可以读取地址栏并知道您正在离开该站点。
当我听到这个问题时,感觉它几乎不可能实现。我知道在离开网页时可以显示一个对话框进行确认。但是,在离开整个站点时显示对话框是否可行呢?
我一直没有找到/创建任何东西可以读取地址栏并知道您正在离开该站点。
首先确定哪些事件可以使您的用户离开您的网站?
那么,你可以对这些做些什么呢?
除了让用户不离开您而外,为什么要控制此事件?在网络世界中,乞求并不能给予公正。当某些网站用消息或更糟的是阻止我离开时,我将不再想回来。这闻起来像是一个可怕的可怕的可怕的可用性,并暗示着广告软件网站。
相反,尝试通过提供有价值的内容来保持用户的兴趣。
你最好监听非标准的beforeunload
事件。这在几乎所有浏览器中都被支持,除了极其严格遵守W3C标准的Opera浏览器。
示例:
window.onbeforeunload = function() {
return "You're leaving the site.";
};
这条消息会显示在确认对话框中。
在您的特定情况下,当单击导航链接或提交内部表单时,您需要将其关闭(只需设置为null
)。 您可以通过监听所需链接的click
事件和所需表单的submit
事件来实现。 在这里,jQuery可能会提供很大的帮助:
window.onbeforeunload = function() {
return "You're leaving the site.";
};
$(document).ready(function() {
$('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
$('form').submit(function() { window.onbeforeunload = null; });
});
你只需要给所有外部链接添加事实标准属性 rel="ext"
,以表示它们是外部链接。
<a href="http://google.com" rel="ext">Google</a>
这可能会有所帮助
initLocalLinkException()
之前,需要检查 onclick
事件;HTML:
<a href="test.html">internal link</a>
<a href="#test">html anchor</a>
<a href="http://www.google.com">external link</a>
<a href="http://www.google.com" target="_blank">blank external link</a>
<form action="test.html" method="post" >
<button type="submit">Post Button</button>
</form>
JavaScript:
$(document).ready(function () {
initLocalLinkException();
window.onbeforeunload = function () { confirmExit() };
$('form').submit(function () {
window.onbeforeunload = null;
});
});
function initLocalLinkException() {
$('a').click(function () {
if ($(this).attr('target') != '_blank') {
var link = $(this).attr('href');
if (link.substr(0, 4) == 'http') {
var LocalDomains = new Array('http://www.yourdomain.com',
'https://yourdomain.com',
'localhost', '127.0.0.1');
var matchCount = 0;
$.each(LocalDomains, function () {
if (this == link.substr(0, this.length)) {
matchCount++;
}
});
if (matchCount == '0') {
confirmExit();
} else {
window.onbeforeunload = null;
}
} else { window.onbeforeunload = null; }
}
});
}
function confirmExit() {
alert('Are you sure?'); // Do whatever u want.
}
使用这个问题中的表达式,您可以执行以下操作:
$.expr[':'].external = function(obj){
return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$.expr[':'].internal = function(obj){
return obj.hostname == location.hostname;
};
$(function() {
var unloadMessage = function() {
return "Don't leave me!";
};
$('a:internal').click(function() {
window.onbeforeunload = null;
});
$('form').submit(function() {
window.onbeforeunload = null;
});
$('a:external').click(function() {
window.onbeforeunload = unloadMessage;
});
window.onbeforeunload = unloadMessage;
});
请看这个帖子。
实现这个功能的一种可能的方法是使用JavaScript在页面加载时检查所有a
标签,并检查它们是否链接到外部网站。如果是,您可以添加一个onclick
事件来显示确认/警报框或更优雅的东西。当然,使用jQuery将大大简化您需要编写的JavaScript代码,就像上面的帖子中所示。
这是可能的。只需在SO上输入问题或答案,然后在提交之前导航离开即可。无论您单击链接还是在地址栏中键入,都会出现“您确定吗?”警报。您可以在SO Meta上发布帖子,询问他们如何做到这一点。
如果您将网站设计为单页Web应用程序,则可以这样做。
这意味着加载单个页面,然后使用ajax动态加载其他内容。
在这种情况下,当用户离开页面/站点时,将触发onbeforeunload
事件。