I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.

I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:

        <div id="mercial-container">
        <a href="" class="external" target="_blank"> <img src="picture1.jpg" /> </a>
        <a href="" class="external" target="_blank"> <img src="pciture2.jpg" /> </a>
        <a href="" class="external" target="_blank"> <img src="picture3.jpg" /> </a>
        <a href="" class="external" target="_blank"> <img src="picture4" /> </a>
        </div>

I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.

I want to keep my javascript in a separated .js document instead of in the HTML as well.

I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.

I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:

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

I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.

I want to keep my javascript in a separated .js document instead of in the HTML as well.

• javascript
• html

4 Answers 4

Call the confirm() function from the onClick attribute. This function returns true if the user clicks OK, which will open the link, otherwise it will return false.

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

Hope this helps.

You can do it by adding a click event handler to each link. This saves having to use a classname. window.onunload will run even if the user is just trying to close your site, which you may not want.

   <a href="yourwebsitedomain.">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.')<0){
                //They have clicked an external domain
                alert('going external');
            }
            else{
                alert('staying in your site');
            }
        };
    }
    </script>

Since you're new to Javascript I advice you to use a javascript framework to do all the "heavy work" for you.

For example with JQuery you can easily bind an onClick event to all external links by doing:

$(".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();
   }
 });

This way every time a user clicks on a link with the external class, a popup message box asking for a confirmation to leave will be prompt to the user and it will only follow the link if the user says "yes". In case you want only to notify without taking any actions you can replace the confirmation by a simple alert call:

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

If the user click an image,div,.. you need to look for the parent node. !There could be several elements wrapped with 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);

Two side notes:

• If you want to keep track a user by cookie or something similar, it's good practice to check external links, set a timeout and make a synchronic get request to renew.
• It's better to add the event to the document or a div containing all events and decide on target.