Question

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

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

希望这有帮助。

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

Answer 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");
 });

Answer 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并决定目标。

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

4 个答案: