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

时间:2012-11-26 00:07:19

标签: javascript html

我不确定当你点击外部链接时,如何使用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中。

4 个答案:

答案 0 :(得分:2)

从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>

希望这有帮助。

答案 1 :(得分:1)

您可以通过向每个链接添加单击事件处理程序来完成此操作。这节省了必须使用类名。 即使用户只是想关闭您的网站,也会运行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>

答案 2 :(得分:0)

由于您是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");
 });

答案 3 :(得分:0)

如果用户单击图像,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并决定目标。