Solved

How to Add a Warning when Navigating to an External Website?

Posted on 2012-04-12
4
301 Views
Last Modified: 2012-06-27
Hello everyone,
I am working on a website for a client. I am editing their current site that was build by someone else so I am still "learning the code".

Basically, my client wants it so that when a user clicks on a link on the site that takes them AWAY from the company's site, it displays a warning message notifying the user that they are leaving the site.

I know this is extremely annoying, but thats what my client wants. Does anyone know how I can add something like this so it happens "automatically", meaning, I don't have to create a special page for every external link.

Is there a way for some type of PHP script of something to detect when a user clicks a link to an external site it displays the message?

Thanks!
0
Comment
Question by:mfranzel
  • 2
4 Comments
 
LVL 23

Accepted Solution

by:
basicinstinct earned 500 total points
ID: 37841289
you could do this in javascript...

attach a click event handler on the body element of each html page

each click check if the event target is an anchor (you will actually need to check if it's inside an anchor too)

if it is an anchor then check the href - if the href is on a different domain to the current page (window.location.host) then show your message and cancel the event or let it thru as necessary
0
 
LVL 17

Expert Comment

by:Anuroopsundd
ID: 37841294
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 37841319
Observe that you will need JavaScript in order to display the confirmation message, so you may as well do the entire thing in JavaScript.

For example,
window.onload = function()
{
    for (var i = 0; i < document.links.length; i++)
    {
        var lnk = document.links[i];
        if (lnk.href.indexOf(window.location.hostname) === -1)
        {
            lnk.onclick = function()
            {
                return confirm("Are you sure you want to leave?");
            };
        }
    }
};

Open in new window

0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37841324
i made a start for you... runs in chrome on linux that's all i checked...

http://jsfiddle.net/6NXyD/5/

(function(){
    var container = document.getElementById("container");
    if(container.addEventListener)
    {
        container.addEventListener("click", clickEvent, false);
    }
    else
    {
        container.attachEvent("onclick", clickEvent);
    }
    
    function clickEvent($event)
    {
        $event = $event || self.event;
        var element = $event.target || $event.srcElement;
        
        while(element)
        {
            if(/^a$/i.test(element.tagName))
            {
                if(element.href.indexOf(window.location.origin) !== 0)
                {
                    if(!confirm("really want to go away?"))
                    {
                        if($event.preventDefault)
                        {
                            $event.preventDefault();
                        }
                        else
                        {
                            $event.returnValue = false;
                        }
                    }
                };
                break;
            }
            element = element.parentNode;
        }
    }
})();
¿

Open in new window

0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question