Javascript problem with a global external link confirmation alert

Question

Below is the code from a plugin for Joomla. It works on it's own and it's purpose is to detect external links on the page and force them into new browser windows using _blank.

I've tried for about an hour (I don't know javascript well) but I can't seem to figure out how to get an onclick function working.

End result, I want to add to this script the ability of a confirmation dialog, shown in the 2nd code section.

An external link, when clicked, will pop up the confirmation dialog, and if it says yes, they will be able to get to the external URL, opening in a new window. Otherwise, it cancels, and does nothing.

When I create a link with

onclick="return ExitNotice(this.href);"

within it it works perfectly, but since my website has multiple people submitting input, I'd like the confirmation box global.

this.blankwin = function(){
  var hostname = window.location.hostname;
  hostname = hostname.replace("www.","").toLowerCase();
  var a = document.getElementsByTagName("a");   
  this.check = function(obj){
    var href = obj.href.toLowerCase();
    return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;     
  };
  this.set = function(obj){
    obj.target = "_blank";
    obj.className = "blank";
  };    
  for (var i=0;i<a.length;i++){
    if(check(a[i])) set(a[i]);
  };     
};

this.addEvent = function(obj,type,fn){
  if(obj.attachEvent){
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn](window.event );}
    obj.attachEvent('on'+type, obj[type+fn]);
  } else {
    obj.addEventListener(type,fn,false);
  };
};
addEvent(window,"load",blankwin);

Second Part

/* ----------
  OnClick External Link Notice
---------- */
function ExitNotice(link,site,ltext) {
  if(confirm("-----------------------------------------------------------------------\n\n" + 
    "You're leaving the HelpingTeens.org website. HelpingTeens.org\ndoes not " + 
    "control this site and its privacy policies may differ\nfrom our own. " + 
    "Thank you for using our site.\n\nYou will now access the following link:\n"  + 
    "\n" + link + "\n\nPress \'OK\' to proceed, or  press \'Cancel\' to remain here." + 
    "\n\n-----------------------------------------------------------------------")) 
  {
  return true;
} 
history.go(0);
return false;
}

A) Can anyone help me fix this problem? or B) Is there a better solution?

Answer 1

So, I'll summarize my what I think you're asking and then tell you how I think that can be solved. It's possible I've misunderstood your question.

You've got code that goes through all tags and sets their target attribute to "_blank" and sets their className to "blank", and you'd like to instead rewrite the links to use JavaScript to show a confirmation dialog and only go to the location if the user clicks Yes.

In this case I believe you want the links to end up as though they were written like so:

<a href="javascript:void(0)" onclick="if (ExitNotice('http://www.whatever.com')) window.location.assign('http://www.whatever.com')"&gt;

The javascript:void(0) causes the normal browser handling of the click to not go to another page, so that your onclick has time to execute.

To make this happen, you'll want to change the definition of this.set (inside this.blankwin) to something like this:

  this.set = function(obj){
    var href = obj.href;
    obj.href = "javascript:void(0)";
    obj.onclick = function() { (if ExitNotice(href) window.location.assign(href); };
    obj.target = "_blank";
    obj.className = "blank";
  };

See here for info on void(0).

Also, note that the code that sets obj.className to "blank" isn't great, because it will remove any other className already assigned to the link. You could instead just add the class name to the existing ones, like so:

obj.className = obj.className + " blank";

Answer 2

Everything works as I want it now. Thank you for your help. As this is my first time using SO, I hope I credited you correctly. Since I can't figure out how to (or even if it's possible) to show code in comment boxes, I'm choosing to answer my own question with the final code for others to benefit.

Once again, you showed me the syntax I needed to modify to get it working the way I wanted.

THANK YOU!

Final code

    this.set = function(obj){
            var href = obj.href;
            //obj.href = "javascript:void(0)";
            obj.onclick = function() { return ExitNotice(href)};
            obj.target = "_blank";
            obj.className = obj.className + " blank";
    };

Answer 3

Hey, i found this thread and think it's quite interesting.

but sadly the most important information is missing. Can xou - OVerdrive - plese tell us, which Joomla Plugin you are using? I'd need the same thing and could not find it after researching...

thanks a lot. nauck

Answer 4

I refined the code a little bit more. Please consider changing the mfblank.js into the following content. So now, all the Script is in one file only AND a additional rel=nofollow is added. Have fun with this script...

this.blankwin = function(){
  var hostname = window.location.hostname;
  hostname = hostname.replace("www.","").toLowerCase();
  var a = document.getElementsByTagName("a");   
  this.check = function(obj){
    var href = obj.href.toLowerCase();
    return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;              
  };  
  this.set = function(obj){
            var href = obj.href;
            obj.onclick = function(){ if(confirm("Do you wanne leave this page?")) {
              return true;
            } 
              history.go(0);
              return false;
            };
            obj.target = "_blank";
            obj.className = obj.className + " blank";
            obj.rel = "nofollow";
    };
    for (var i=0;i<a.length;i++){
        if(check(a[i])) set(a[i]);
    };      
  }; 
  this.addEvent = function(obj,type,fn){
        if(obj.attachEvent){
            obj['e'+type+fn] = fn;
            obj[type+fn] = function(){obj['e'+type+fn](window.event );}
            obj.attachEvent('on'+type, obj[type+fn]);
        } else {
            obj.addEventListener(type,fn,false);
        };
    };
    addEvent(window,"load",blankwin);