Exit out of website 1

[rkferri]

I'm trying to figure out a way to alert users when exiting out of a website. The only thing I can think of to use is javascript. The website is done in just plain html. When you click on a button I want an alert box to pop up letting the user know they will be leaving this website. How can I do this in javascript or is there a better way to do this?

Thanks,
Kelly

 

[rac2]

...
<form>
...
<input type="button" value="Go to Pops website" onclick="goTo('Pop');">
...
</form>

<script>
function goTo( strWhichWebsite ) {
   alert("You are leaving my website.");

   if( strWhichWebsite == "Pop") {
      document.forms[0].action = "[URL unfurl="true"]http://www.popswebsite.net";[/URL]
   }
   if( strWhichWebsite == "Mom") {
      document.forms[0].action = "[URL unfurl="true"]http://www.momswebsite.net";[/URL]
   }

   document.forms[0].submit();
}
</script>

In the above code you may substitute the URLs you wish to link to and add as many as you need.

If you wish to give the viewer a chance to not go to the other website, then replace the alert with a confirm().

...<script>
function goTo( strWhichWebsite ) {



   if ( confirm("Are you sure you wish to leave my website?")  ) {
      
      if( strWhichWebsite == "Pop") {
         document.forms[0].action = "[URL unfurl="true"]http://www.popswebsite.net";[/URL]
      }
      if( strWhichWebsite == "Mom") {
         document.forms[0].action = "[URL unfurl="true"]http://www.momswebsite.net";[/URL]
      }
      
      document.forms[0].submit();
   }
}
...

 

[rkferri]

Thanks so much works wonderful!!

 

[feherke]

Hi

Please do not do that. It is annoying when JavaScript breaks the navigation. Instead of rewriting bunches of links, just insert this code in each page's [tt]head[/tt] section.

<script type="text/javascript">
window.onload=function() {
a=document.getElementsByTagName('a');
c=document.location.protocol+'//'+document.location.host+'/';
for (i=0;i<a.length;i++)
  if (a[i].href.substr(0,4)=='http' && a[i].href.substr(0,c.length)!=c)
    a[i].onclick=function() { return confirm('External link. Sure to follow ?'); }

}
</script>

It works in Mozilla and Mozilla-based browsers, Opera, Explorer and probably many others. It just does nothing if JavaScript is disabled, letting the visitor to follow the links.

Note that you can put that code in an external file and just load it in each page.

Feherke.

http://rootshell.be/~feherke/

 

[rac2]

Feherke,

hunh?

 

[feherke]

Hi

Feherke,

hunh?

Sorry, I do not understand that. Maybe that means that neither you understand my comment.

Personally I like to open multiple web pages at once, in separate tabs. When I find a web page with more than one interesting link, I open them in new tabs. ( Right click > Open Link in New Tab or Ctrl-left click or middle click ) But that is only possible with regular links. So with your [tt]input[/tt]-based solution I would have to first open the original page many times, than on each to click different button. So personally I would just leave that site in no seconds and never come back or recommend it to anyone.

Feherke.

http://rootshell.be/~feherke/

 

[rac2]

Quite right. To my eyes, your code was opaque and to my mind your comment was obtuse.

Here was my thinking.
rkferri said

... click on a button ...

When I read "button", I thought "form", buttons are parts of forms. Of course, that may not be the case, as where images are made to behave like buttons or links. I made clear my assumption in my code by enclosing an input button in form tags.

If we have a form, the likely thing we wish to do is submit it, although in my code I left open the possibility that we were merely using the form for navigation by providing no attributes in the form tag.

The rest of my code follows from that. If we were submitting a form, navigation would not be an issue. In fact, navigation in that process can be a problem. Unlikely we would ever need to navigate to the confirmation page, the postback page, or return to the form outside of the coded processes.

So that is my explication of my first post.

But it seems you were speaking to the navigation aspect of rkferri question. Udoubtably a better reading of his post. I am interested in understanding what your code does and how it permits tabbed browsing. Also, please show HTML code for the button (input button, input image, or anchored image) you would be handling.

 

[monksnake]

Quite right. To my eyes, your code was opaque and to my mind your comment was obtuse.

That's a funny statement.




<.

 

[feherke]

Hi

Hmm... My mind emphasized the "exiting out of a website" part and quite ignored the "button" word...

Sorry rac2, then my request for not using such things is addressed to Kelly.

I am interested in understanding what your code does and how it permits tabbed browsing.

In extremely simple wording adds an [tt]onclick[/tt] parameter to the [tt]a[/tt] tags.

<a href="[URL unfurl="true"]http://example.com/">Example</a>[/URL]
   [gray]|[/gray]
   [gray]V[/gray]
<a href="[URL unfurl="true"]http://example.com/"[/URL] [red]onclick="return confirm('External link. Sure to follow ?');"[/red]>Example</a>

[gray]// do all this when the page finishes loading[/gray]
window.onload=[b]function[/b]() {
[gray]// get a list of all a tags in this document[/gray]
a=document.getElementsByTagName([i]'a'[/i]);
[gray]// keeps the current domain in a variable[/gray]
c=document.location.protocol+[i]'//'[/i]+document.location.host+[i]'/'[/i];
[gray]// do this for all a tags[/gray]
[b]for[/b] (i=0;i<a.length;i++)
[gray]// if the link's URL begins with 'http'[/gray]
  [b]if[/b] (a[i].href.substr(0,4)==[i]'http'[/i]
[gray]// ... and does not begin with current domain[/gray]
  && a[i].href.substr(0,c.length)!=c)
[gray]// attach an inline function as onclick event handler[/gray]
    a[i].onclick=[b]function[/b]() {
[gray]// ask visitor's confirmation an returns its value[/gray]
      [b]return[/b] confirm([i]'External link. Sure to follow ?'[/i]);
    }
}

It permits opening links in tabs by...
[ul]
[li]right click | Open Link in Wen Tab - does not fire [tt]onclick[/tt] event[/li]
[li]Ctrl-left click - fires the [tt]onclick[/tt] event and opens the document regardless the [tt]return[/tt] value[/li]
[li]middle click - does not fire [tt]onclick[/tt] event[/li]
[/ul]

Also, please show HTML code for the button (input button, input image, or anchored image) you would be handling.

No, it does not touch the [tt]input[/tt] tags, as that was not may goal.

Supposing the document was loaded from [ignore]

http://example.com/

[/ignore], the links will be affected like :

<a href="/">relative</a>                     [gray]<!-- nothing -->[/gray]
<a href="[URL unfurl="true"]http://example.net/">external</a>[/URL]   [gray]<!-- adds the onclick function -->[/gray]
<a href="[URL unfurl="true"]http://example.com/">absolute</a>[/URL]   [gray]<!-- nothing -->[/gray]
<a href="javascript:alert(0)">JavaScript</a> [gray]<!-- nothing -->[/gray]

But while you insist on [tt]button[/tt]s, is easy to modify the code to do its job on buttons. I mean [tt]input[/tt]s of [tt]type[/tt] [tt]submit[/tt], [tt]reset[/tt] and [tt]button[/tt].

window.onload=function() {
a=document.getElementsByTagName('input')
for (i=0;i<a.length;i++) if (a[i].type.match(/submit|reset|button/)) a[i].onclick=function() { return confirm('Really want to push that ?') }
}

[gray]<!-- ... -->[/gray]

<input type="text">     [gray]<!-- nothing -->[/gray]
<input type="radio">    [gray]<!-- nothing -->[/gray]
<input type="checkbox"> [gray]<!-- nothing -->[/gray]
<input type="submit">   [gray]<!-- adds the onclick function -->[/gray]
<input type="reset">    [gray]<!-- adds the onclick function -->[/gray]
<input type="button">   [gray]<!-- adds the onclick function -->[/gray]

Or to not affect all buttons, just some of them. Lets say those of class infactalink. ( Note that you do not have to define something for that style class. )

window.onload=function() {
a=document.getElementsByTagName('input')
for (i=0;i<a.length;i++) if (a[i].className=='infactalink' && a[i].type.match(/submit|reset|button/)) a[i].onclick=function() { return confirm('Really want to push that ?') }
}

[gray]<!-- ... -->[/gray]

<input type="button">                     [gray]<!-- nothing -->[/gray]
<input type="button" class="infactalink"> [gray]<!-- adds the onclick function -->[/gray]

Feherke.

http://rootshell.be/~feherke/

 

[rac2]

Very nice. Thanks for the lesson.

 

[feherke]

Hi

And I thank to Greasemonkey. It made me more familiar with such document manipulations.

For example, on your Tek-Tips profile page there is a table which summarizes your activity. There are enumerated how many stars you got in each forum, but there is no total for them. Well, I have. Greasemonkey calculates it and displays it in a newly added table row. By the way, your 242 stars is a nice result.

Feherke.

http://rootshell.be/~feherke/