Skip to main content

Adding favicon to javascript Bookmarklet (uses window.open)



I have a bookmarklet that launches a window.open javascript function to open a small window with my bookmarklet -- an external feature used to communicate between any visted site and my server. I'd like for a favicon to show up when the bookmarklet is added to the bookmark toolbar. I realize that the bookmarklet is javascript, there is no domain tied to it so it's going to be either difficult or impossible to achieve this goal.





My understanding of the problem:





Favicons are easy to understand, a link within the head of an HTML doc. The browser can pull this when bookmarking an actual site by reference. However, as you see my bookmarklet is ran off a javascript launch code where there exists no HTML, therefor no link to a favicon . I'm not ready to give up yet though, I feel that there's some injection that can be made...





As of now, the bookmarklet launch code looks like this:





Current Script -- bookmarklet, no favicon (note all code is formated with line breaks -- won't work in all browsers, normally its one line)







javascript:void(window.open(

'http://mydomain.com/bookmarklet/form?u='

+encodeURIComponent(location.href)+

't='+encodeURIComponent(document.title),

'test','status=0,toolbar=0,location=0,menubar=0,

resizable=false,scrollbars=false,height=379,width=379'

));










The closest thing I've found to a solution is as follows, but it doesn't open a new window -- just creates a new tab with the html as the page:





Working favicon, no bookmarklet window







javascript:'<!DOCTYPE html>

<html><head>

<title>Hello World</title>

<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />

</head>

<body>Hello World</body>

</html>';










I have tried a combination of the two but it didn't seem to use the icon. I'd be curious to know if anyone can see a type of workaround.. I think it could be possible, I just don't think it's set up correctly as I've been trying.





My hybrid of the two -- bookmarklet but no favicon







javascript:'<!DOCTYPE html>

<html><head>

<title>Hello World</title>

<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />

</head><body>Hello World</body></html>';

window.open('http://mydomain.com/bookmarklet/form?u='

+encodeURIComponent(location.href)+

'&t='+encodeURIComponent(document.title),

'test',

'status=0,toolbar=0,location=0,menubar=0,resizable=false,

scrollbars=false,height=379,width=379').void(0);







What I did was use the html structure before firing window.open(), this successfully opened my bookmarklet in a new window, but no favicon showed up for the bookmark icon.








Logical Solution:





My thoughts on this would be to have the bookmarklet point to a page that is simply an HTML file with a favicon link and the launch script in the <head> . However, I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?








There exists a similar question but I did not seem to find the answer I'm looking for:





How to have favicon / icon set when bookmarklet dragged to toolbar?





Source for the working javascript favicon (no bookmarklet however):





http://www.tapper-ware.net/blog/?p=97





I'd be interested in what your current knowledge/thoughts on this would be



Source: Tips4all

Comments

  1. This might not be the solution you want, especially if you don't use Firefox, but I use an add-on called Bookmark Favicon Changer to set the icon's on my bookmarklets and it works great.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.