点击外部链接并将其添加到链接类时出现警告

我不确定如何使用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以及。

来源

2012-11-26 Benji

从onClick属性调用confirm（）函数。如果用户点击OK，该函数返回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>

希望这会有所帮助。

来源

2012-11-26 00:20:47

这似乎做我想要的一切，除了我忘了提及，我想有一个确认，而不是只是一个警报。点击“确定”将直接进入外部网站，而按下取消则不会。 – Benji

我更新了你的答案。现在您只需返回确认功能的值。如果你点击确定链接将会打开，否则该函数返回false，链接将不会打开。 –

如果你感到困惑，这将解释confirm（）方法：http：// www。w3schools.com/jsref/met_win_confirm.asp –

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

来源

2012-11-26 00:29:10 gkiely

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

来源

2012-11-26 00:56:55 pabrantes

如果用户点击图片，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或类似的东西用户，这是很好的做法，以检查外部链接，设置超时，使共时get请求续约。
最好将事件添加到文档或包含所有事件的div并决定目标。

来源

2014-08-26 09:25:29

点击外部链接并将其添加到链接类时出现警告

回答

相关问题