我有一个页面,其中包含网络状态的事件监听器。当网络处于“离线”状态时,我想禁用任何跨域链接以进入离线模式。我尝试使用 .preventDefault()
,但是当应用恢复在线时我需要重新启用链接。
事件监听器
//check network status
if(!navigator.onLine) {
offlineLinks(); //Offline mode function
}
//add event listeners for network status
window.addEventListener('offline', function(e) {
offlineLinks(); //Offline mode function
}, false);
window.addEventListener('online', function(e) {
//need to re-enable links/Online mode
}, false);
window.addEventListener('error', function(e) {
alert('Error fetching manifest: there is a good chance we are offline.');
offlineLinks(); //Offline mode function
});
“去链接”功能
function offlineLinks() {
$('a[href^="http"]').click(function(e) {
e.preventDefault();
$('#offline-dialog').dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
}
我正在寻找一种可扩展的解决方案,如果页面上有大量链接,它不会导致延迟。是否有一个简单的解决方案来反转 .preventDefault()
调用或完成此任务的更好方法?
可能的解决方案
我最初的想法是存储一个 href 值数组,然后删除/添加。我一直在玩弄使用 webdb
的 HTML5 存储,我可以为它创建一个数据库并动态拉取 hrefs onclick...但是我不确定这是否是最好的解决方案。
最佳答案
您似乎在使用 jQuery,至少在链接处理程序部分是这样。
需要注意的是 $.click(handler) 只是 .bind('click', handler) 的简写。如果您在别处定义处理程序,您也可以稍后取消绑定(bind),如下所示:
var handler = function(event) {
event.preventDefault();
console.log("the links, they do nothing!");
}
// when you want the external links to be inactive.
// you could use .click(handler) here too, it's the same.
$('a[href^="http"]').bind('click', handler);
// when you want them back
$('a[href^="http"]').unbind('click', handler);
顺便说一下,href^="http"有点脆弱,如果你只希望这种情况发生在外部链接上的话。内部链接可能以“http”开头,一些外部链接可能以“ftp”等其他协议(protocol)开头。最好为此类链接赋予它们自己的类别,就像维基百科对“外部”所做的那样。
关于javascript - 撤消 preventDefault() 或以编程方式禁用链接集合的更好方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6339190/