如果通过单击锚点进行重定向，则停止重定向页面

Posted 2023-02-22

【中文标题】如果通过单击锚点进行重定向，则停止重定向页面

【英文标题】：stop redirecting page if it is redirecting by clicking on anchor

【发布时间】：2013-07-18 22:50:17

【问题描述】：

我想防止页面重定向我知道可以通过这个来实现

window.onbeforeunload = function() 
        return "Dude, are you sure you want to leave? Think of the kittens!";

这里回答了Prevent any form of page refresh using jQuery/javascript

但在我的情况下，我只想通过单击任何锚标记来阻止页面重定向。

在我点击锚标记时event.preventDefault() 也不起作用，因为所有锚都没有重定向页面，所以它应该可以正常工作。

如果通过单击锚点进行重定向，我只想停止重定向页面。有什么解决办法吗？

【问题讨论】：

点击锚点时设置一个标志。然后在这个处理程序中检查那个标志

可以看.caller见：***.com/questions/1333498/…

【参考方案1】：

如果点击链接，调用者将为空：

window.onbeforeunload = function() 
    alert(window.onbeforeunload.caller)    

【讨论】：

即使我从 url 刷新页面，它也会一直返回 null

但是如果你从一个JS函数刷新它，你应该得到函数名。

【参考方案2】：

你可以保留一个标志，告诉你用户是否点击了a标签，然后在你的onbeforeunload脚本上阅读：

window.onbeforeunload = function () 
    if (_clickedAnchor) 
        _clickedAnchor = false;
        return "Dude, are you sure you want to leave? Think of the kittens!";
    


_clickedAnchor = false;

jQuery(document).ready(function () 
    jQuery("a").click(function () 
        _clickedAnchor = true;
    );
);

【讨论】：

没想到这个。很棒的答案

如果使用链接调用JS怎么办？将设置此标志。

@DRobinson 如果您还没有使用 jQuery，那么您可能是对的，但问题是用它标记的 - 如果您使用的是 jQuery，那么我说尽可能使用它。比处理特定于浏览器的事件怪癖要容易得多。

@DRobinson 切换到链接并按 Enter 仍会触发 click 事件。

那么，是的，我看到的唯一问题是 Diodeus 解释的。您可以将 href 存储在 _clickedAnchor 中并检查它是否为 null，或者以“#”开头，而不是 true/false。在通常将其设置为 false 的地方将其设置为 null。仍然不完美，因为它很可能有一个带代码的 href 来捕获点击并返回 false 以防止重定向。

【参考方案3】：

因此，既然您标记了 jQuery，我将以此为依据提出我的解决方案。您可以抓取所有 a 标签，然后检查以确保锚点是重定向，然后使用 e.preventDefault();

$('a').on('click',function(e)
    if ($(this).attr('href') != window.location.href)
    
       e.preventDefault();
       //do stuff
    
);

【参考方案4】：

您可以使用onhashchange。

使用 jQuery：

$(window).on('hashchange', function() 
    alert('bye byee?');
);

纯 DOM JavaScript：

window.onhashchange = function() 
    alert('bye byee?');
;

注意：您需要为不支持此事件的旧浏览器创建自定义“哈希更改”处理程序。

您可以使用setInterval 轻松执行此操作，并检测document.location.hash 中的任何更改。

---

Failsafe onhashchange 用于旧版浏览器：

var currentHash = document.location.hash;

window.prototype.onhashchange = function( callback ) 
    if(typeof(callback) == 'function') 
        setInterval(function() 
            if(document.location.hash !== currentHash) 
                callback();
            
        , 650); // more than a half-a-second delay
    

您可以将其用作常规 DOM 约定中的事件。

【讨论】：

我正在使用 jquery 1.7 和 IE 9 但它不起作用，将尝试这个回调