點擊外部鏈接並將其添加到鏈接類時出現警告

我不確定如何使用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

點擊外部鏈接並將其添加到鏈接類時出現警告

回答

相關問題