Forum: Rails Spinoffs (closed, excessive spam) Appending Favicon to All External Links

Hey folks!

I've been testing out this little bit of code that I wrote & modified
from a previous jQuery implementation of a favicon link fetcher.
Basically, all it does is pull the favicon.ico from any external links
contained on my page and appends them to the end of the link.  It's
quite simple, and works wonderfully _except_ in IE7.  Here's the code:

http://pastie.org/218226

In FF3 and Safari 3 the onError event is properly observed, and the
image is removed from the DOM when there is no favicon available at
the external site location.  However, IE7 does not remove the image,
and I get the typical grey box of missing-image ugliness.

Is there something that I'm missing?  If not, is there a way to force
IE7 to not display the image if it does not exist at the remote
location?

Merci!
-Joel.

On Thu, Jun 19, 2008 at 12:19 PM, Joel Perras <joelperr@gmail.com> 
wrote:
>
> Basically, all it does is pull the favicon.ico from any external links
> contained on my page and appends them to the end of the link.  It's
> quite simple, and works wonderfully _except_ in IE7.

Say, that's pretty neat!

I managed to get it working on IE by inserting a string rather than an
Element object. (A bit icky from a standards perspective, I realize,
but then IE is an icky browser.) Exactly why the former works and the
latter doesn't is a mystery to me, so if anybody knows more, do tell
:)

You can still keep configuration and readability by using Prototype's
very cool String.interpolate. Here's what I came up with:

favicon = '<img class="#{className}" src="#{src}" alt="#{alt}"
onerror="#{onError}" />'.interpolate({
  className: 'favicon',
  src: link.href.replace(/^(http:\/\/[^\/]+).*$/, '$1') + 
'/favicon.ico',
  alt: 'external link',
  onError: 'javscript:$(this).remove()'
});

Very cool idea. I may just have to look for places to use this now :)

:Dan

On Thu, Jun 19, 2008 at 1:21 PM, Dan Dorman <dan.dorman@gmail.com> 
wrote:
> I managed to get it working on IE by inserting a string rather than an
> Element object.

Okay, I got it working with an Element object too, by moving the
onError attribute to an event handler:

var favicon  = new Element('img', {
  className: 'favicon',
  src: (link.href).replace(/^(http:\/\/[^\/]+).*$/, '$1') + 
'/favicon.ico',
  alt: 'external link'
}).observe('error', function() { $(this).remove(); });

:Dan

On Thu, Jun 19, 2008 at 1:21 PM, Dan Dorman <dan.dorman@gmail.com> 
wrote:
>
> I managed to get it working on IE by inserting a string rather than an
> Element object.

Okay, sheesh, so I really wanted a version that added the favicon as a
background image to the link rather than as a standalone image
element. Ergo:

Event.observe(window, 'load', function() {
  // Find all external links (begin with absolute URL)
  $$('a[href^="http://"]').each(function(link) {
    if (!link.hasClassName('nofav')) {
      link.favicon = new Element('img', {
        src: link.href.replace(/^(http:\/\/[^\/]+).*$/, '$1') + 
'/favicon.ico'
      }).observe('error', (function() {
        $(this).setStyle({ backgroundImage: 'none', padding: '0' });
      }).bindAsEventListener(link));

      link.setStyle({
        backgroundImage: 'url(' + link.favicon.src + ')',
        backgroundPosition: 'left',
        backgroundRepeat: 'no-repeat',
        paddingLeft: '20px'
      });

      link.favicon = null;
    }
  });
});

Yep, I remember similar complaints about IE and #writeAttribute (which
new Element uses internally for setting "options"). This is one of the
reasons why using on* attributes is usually discouraged.

- kangax

It works perfectly.  Bloody brillant and simple solution as well!
I owe you one internet beer.

-Joel.