使用 javascript 向某些页面链接添加减速带，确认不会重定向答案

【问题标题】：Adding speedbumps to some page links with javascript, confirm doesn't redirect使用 javascript 向某些页面链接添加减速带，确认不会重定向
【发布时间】：2014-08-29 08:14:02
【问题描述】：

我正在使用 ASP 和 VB 后端、CSS 和 JavaScript 在 vs2012 中开发一个站点。长话短说，如果一个链接将用户带离我们的网站，它需要有一个免责声明减速带，说我们不负责任等等等等。我使用以下代码执行此操作...

$(document).ready(function () {
    var anchors = $("a").get();
    for (var i = 0; i < anchors.length; i++) {
        var anchor_element = anchors[i];
        var url = anchor_element.attributes[0].nodeValue;
        if ((url.indexOf('.com') != -1) || (url.indexOf('ForwardProcessing') != -1)) {
            anchor_element.onclick = function () {
                return window.confirm('The link you selected will take you to a third party website...\r\rClick <CANCEL> if you would like to stay.');
            }
        }
    }
});

所以这准确地找到了我正在寻找的链接，并附上减速带就好了（仅在 IE 中，但我会在一分钟内解释更多）。但是在运行时，然后，当您单击“确定”时，我的鼠标指针变成了带有感叹号的手，并且页面没有改变。显然 JavaScript 中发生了一些错误，但我在代码中找不到任何好的地方来放置断点以查看可能发生的错误。

这导致了第二个问题......这似乎只适用于 IE。我尝试使用 firefox/firebug 来查看 js，但从未出现过减速带，用户直接进入下一页...这告诉我肯定出了点问题，但信息更少。有没有 JavaScript 专家看到了什么？我对js还是很陌生，谷歌搜索了一天，没有找到任何东西......

更新：这个问题似乎与弹出有关？在 html 中，我使用 target = _blank 在新选项卡中打开链接...取出它可以解决问题，但我想使用新选项卡...这有冲突吗？

【问题讨论】：

你在 Chrome、FireFox 和 IE11 中对我有用的东西：jsfiddle.net/N79sW

标签： javascript jquery asp.net redirect

【解决方案1】：

尝试将以下onclick 行更改为：

anchor_element.onclick = "return window.confirm('The link you selected will take you to a third party website...\r\rClick <CANCEL> if you would like to stay.');";

当然还要修复包围。我没有测试过它，但认为你可以比我设置测试场景更快。如果它不起作用，请告诉我。

编辑：刚刚测试了您的原始更改和我的更改，两者都工作正常，所以我的答案不是解决方案...您能发布您的错误是什么吗？我没有得到一个，除非它重定向到 www.google.com 我在 google 页面上收到错误，但我的其他 3 个测试重定向页面工作正常。

这是我的测试代码...

<a href="http://www.google.com" target="_blank">Google</a><br />
<a href="http://www.microsoft.com" target="_blank">Microsoft</a><br />
<a href="http://www.apple.com">Apple</a><br />
<a href="http://www.stackoverflow.com">Stackoverflow</a><br />

<script type="text/javascript">
    $(document).ready(function () {

        var anchors = $("a").get();

        for (var i = 0; i < anchors.length; i++) {
            var anchor_element = anchors[i];
            var url = anchor_element.attributes[0].nodeValue;
            if ((url.indexOf('.com') != -1) || (url.indexOf('ForwardProcessing') != -1)) {
                anchor_element.onclick = "return window.confirm('The link you selected will take you to a third party website...\r\rClick <CANCEL> if you would like to stay.');";                    
            }
        }
    });

页面中没有其他内容，它可以正常工作。

编辑 2： 我使用 IE11 进行了测试，并打开了弹出窗口阻止程序，没有遇到任何问题。网站在新标签页中打开没有问题。弹出窗口阻止程序设置为“中等”。

【讨论】：

如果我这样做了，那么在页面加载时所有的减速带都会弹出，然后当我点击链接时不会出现：/
您确定要发布确切的代码吗？我将发布我的测试代码供您查看。
我直接复制粘贴了，唯一的修改是替换了包含我们公司名称的减速带中的措辞。
@Jon 肯定有其他事情发生...把我的代码放在一个空白的 HTML 页面中，你会发现它可以工作。（确保你当然也有 jquery 引用）
该错误实际上似乎是弹出窗口阻止程序问题？如果我没有在实际链接中使用“target= _blank”，我可以绕过它...这会影响 javascript 吗？

【解决方案2】：

代码最终有 2 个问题。首先是我需要使用anchor_element.href -> IE 识别属性[0] 作为href，但如果是firefox，这是一个CSS 值。指定 WHICH 属性解决了这个问题。

它在 IE 中不起作用的原因是，在确认后没有跟进链接，这有点令人尴尬。我在 IE 中关闭了弹出窗口阻止程序...但在我的谷歌工具栏中没有。：/

但我到这里只是因为其他人确认它对他们有用。谢谢大家！

【讨论】：