单击外部链接时的警告以及如何将其添加到链接类答案

【问题标题】：Warning when clicking external links and how to add it to a link class单击外部链接时的警告以及如何将其添加到链接类
【发布时间】：2014-08-26 17:25:29
【问题描述】：

我不确定如何使用 javascript 在您单击外部链接时弹出警告。

我认为在我的外部链接上也放一个类会很方便，但我不太确定它是否像现在这样正确。这是我目前使用的 HTML：

        <div id="commercial-container">
        <a href="http://www.link1.com" class="external" target="_blank"> <img src="picture1.jpg" /> </a>
        <a href="http://www.link2.com" class="external" target="_blank"> <img src="pciture2.jpg" /> </a>
        <a href="http://www.link3.com" class="external" target="_blank"> <img src="picture3.jpg" /> </a>
        <a href="http://www.link4.com" class="external" target="_blank"> <img src="picture4" /> </a>
        </div>

我对 javascript 非常陌生，并且非常不确定如何解决我的问题。到目前为止，我几乎唯一想到的是我将不得不使用 window.onbeforeload 但我不知道如何弄清楚如何编写我需要的函数。

我想将我的 javascript 保存在单独的 .js 文档中，而不是 HTML 中。

【问题讨论】：

标签： javascript html

【解决方案1】：

从 onClick 属性调用 confirm() 函数。如果用户点击确定，则该函数返回true，这将打开链接，否则返回false。

<a href="http://www.link1.com" onClick="return confirm('Do you want to leave')" class="external" target="_blank"> <img src="picture1.jpg"/> </a>

希望这会有所帮助。

【讨论】：

这似乎做了我想做的一切，除了我忘了提到我想要确认而不是警报。单击“确定”将引导您到外部站点，而按取消则不会。
我更新了你的答案。现在您只需返回确认函数的值。如果单击确定链接将打开，否则该函数返回 false 并且链接将不会打开。
如果您感到困惑，这将解释 confirm() 方法：w3schools.com/jsref/met_win_confirm.asp

【解决方案2】：

您可以通过向每个链接添加单击事件处理程序来实现。这样就不必使用类名了。即使用户只是试图关闭您的网站，window.onunload 也会运行，您可能不希望这样做。

   <a href="yourwebsitedomain.com">staying in site</a>
    <a href="two">going external</a>

    <script>
    var a = document.getElementsByTagName('a');
    var b = a.length;

    while(b--){
        a[b].onclick = function(){
            if(this.href.indexOf('yourwebsitedomain.com')<0){
                //They have clicked an external domain
                alert('going external');
            }
            else{
                alert('staying in your site');
            }
        };
    }
    </script>

【讨论】：

href 属性中没有该域并不意味着它是一个外部链接

【解决方案3】：

由于您是 Javascript 新手，我建议您使用 javascript 框架来为您完成所有“繁重的工作”。

例如使用JQuery，您可以轻松地将 onClick 事件绑定到所有外部链接：

$(".external").click(function(event) {
   var confirmation = confirmation("Are you sure you want to leave ?");
   if (!confirmation) {
     // prevents the default event for the click
     // which means that in this case it won't follow the link
     event.preventDefault();
   }
 });

这样，每次用户点击外部类的链接时，都会提示用户确认离开的弹出消息框，并且只有在用户说“是”时才会跟随链接。如果您只想通知而不采取任何操作，您可以通过简单的警报调用替换确认：

$(".external").click(function(event) {
   alert("You are leaving the site");
 });

【讨论】：

【解决方案4】：

如果用户点击图片，div，..你需要寻找父节点。 ! 可能有几个元素用 a-tag 包裹。

document.addEventListener('click',function(event){
    var eT=(event.target||event.srcElement); 

    if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
    || (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a' 
    && eT.parentNode.href.indexOf('<mydomay>')<0))
    {
    //do someting
    }

    else if(eT...){
      ...
    }
},false);

两个旁注：

如果您想通过 cookie 或类似的方式跟踪用户，最好检查外部链接、设置超时并发出同步获取请求以进行更新。
最好将事件添加到文档或包含所有事件的 div 中并确定目标。

【讨论】：