Step by step howto – display a warning before leaving site

[problem]

Sometimes there is an audit requirement, to let customers know a link is off your site and therefore you take no further responsibility for it. For example, a reference to an external associate site.

[/problem]

[solution]

I’ve just used some simple javascript code, which is triggered by the click (onclick event). This pops up a warning, which can be accepted or rejected. Accepting goes to the desired site, whilst reject just aborts.

[/solution]

[example]

Or you can see it in its own page here:

Here is the source code of the link:

<script>
function Terms() {
    popup=window.open('/common/demoP/popup.html','windowName','width=500,height=300');
    if (!popup.opener) popup.opener = self;
}
</script>

Hi there - below you'll see a link to www.securityfocus.com.  When you click it, a popup will appear that you need to accept to follow the link.



<a href="#" onClick="Terms()">www.securityfocus.com

Here is the source of the popup:

<script>
function supressError() { return true; }

function load(url) { window.onerror = supressError;
    opener.location.href = url;
}
</script>

Warning you are about to leave my cool site,

only click 'Leave' if you absolutely want too!

<form>
<input type=submit value="Don't Leave!" onClick="javascript:self.close()">
<input type=submit value="Leave" onClick="javascript:load('http://www.securityfocus.com');self.close()">
</form>

[/example]

If you have found my website useful, please consider buying me a coffee below 😉