« Dynamic OpenURL Resolvers | Main | Deep Smarts »

Dynamic OpenURL Redux

I apparently could not leave the previous blog entry alone. I found that I needed to deconstruct the SULinks bookmarklet to see how it worked.

As we'll see, the SULinks bookmarklet is designed to look for <a> tags of the following form,

<a name='id=pmid:22341234' rel='alternate' title='OpenURL'></a>

where <a> tag has the following attributes:

  • name='id=pmid:22341234'
  • rel='alternate'
  • title='OpenURL'

and convert it into the form 

<a href="http://sfx3.exlibrisgroup.com:9003/syracuse?id=pmid:22341234">
<img src="http://libwww.syr.edu/images/sfx.jpg" alt="SULinks" border="0">
</a>

where the new form of the <a> tag is

  • href="http://sfx3.exlibrisgroup.com:9003/syracuse?id=pmid:22341234" is added as a new attribute and contains the base url of the SFX resolver, with the openURL that was originally contained in the "name" attribute appended
  • name='id=pmid:22341234' is discarded
  • rel='alternate' is unchanged
  • title='OpenURL' is unchanged

A new <img> tag is added as a "child" of the <a> tag, which simply means that it goes inside it, between the opening <a> and closing </a>

So how does this transformation happen?

In its raw form, the SULinks bookmarklet looks as follows

javascript:(function(){d=document; l=d.getElementsByTagName('a'); for(iinl){c=l[i];if(c.rel=='alternate'&&c.title=='OpenURL'&&!c.href) {c.setAttribute('href','http://sfx3.exlibrisgroup.com:9003/syracuse'+'?' +c.name);np=d.createElement('img'); np.setAttribute('src','http://libwww.syr.edu/images/sfx.jpg'); np.setAttribute('alt','SULinks');np.setAttribute('border','0'); c.appendChild(np);c.removeAttribute('name');}}})();

Broken apart and commented, it looks as follows:

// the first bit is just the container for the bookmarklet
javascript:(

// an unnamed function auto-executes as soon as the 
// javascript is called
function()
{

 // name the webpage (the "document") we're looking at as "d"
 d=document;

 // look for all the <a> tags in document "d" and store them in "l"
 // because of the way we're doing that, "l" becomes an array
 l=d.getElementsByTagName('a');

 // since "l" is an array, we can talk about all the stuff stored in
 // it by calling them one after another as l[1], l[2], l[3], 
 // and so on --
 // that's what the "for(i in l)" is doing: calling each l[i] where
 // i=1, i=2, i=2, etc. until everything in array "l" is called
 for(i in l)
 {

  // the "for" function is a loop; each time through, rename
  // "l[i]" with the simpler name, "c"
  c=l[i];

  // remember what is in array "l"? -- it's all the <a> tags;
  // for each <a> tag, see if there is a "rel='alternate'"
  // and "title='OpenURL'; if so, that's what we want to do the
  // next operation on
  if(c.rel=='alternate'&&c.title=='OpenURL'&&!c.href)
  {

   // now we're going to deconstruct the <a> tag where 
   // previously it took the form <a name="something">, 
   // we're going to add in a new <a href="new thing + something">,
   // where in this case the "something" was the actual openURL
   // for an article and the "new thing" is the base url for your
   // institution's SFX server -- that is to say, the openURL 
   // contained in the name attribute (the "c.name" part) is stuck
   // on the end of the string that contains the SFX resolver
   // location so now the <a> tag has all the attributes it
   // had before: "name", "rel", and "title" plus the new one we 
   // just built "href"
   c.setAttribute('href','http://sfx3.exlibrisgroup.com:9003
   /syracuse'+'?'+c.name);

   // now we will create a new image object in document "d" and call
   // it "np"
   np=d.createElement('img');

   // we assign the <img> tag a "src" by giving its url
   np.setAttribute('src','http://libwww.syr.edu/images/sfx.jpg');

   // we assign the <img> tag an "alt" attribute
   np.setAttribute('alt','SULinks');

   // we assign the <img> tage a "border='0'" attribute
   np.setAttribute('border','0');

   // we make the <img> tag a child of the object contained in
   // container "c" -- now remember that "c" has the the <a> tag
   // passed to it from "l[i]" and that we just performed surgery on
   // it in the previous steps to change it from an <a name> tag
   // to an <a href> tag -- what making a child does is to put
   // it inside the <a> -- something like 
   // <a href><img></a>
   c.appendChild(np);

   // last bit is to chuck the <a> tag's superfluous "name"
   // attribute; the "rel" and "title" attributes are not changed
   // or deleted
   c.removeAttribute('name');
  }
 }
}
)();

Addendum: I was a bit annoyed that the links didn't open in a new window since, when you have a list of citations, following any openURL for one citation undoes the dynamically placed openURL links for the others. It was actually extremely easy to change this: just add c.setAttribute('target','_blank'); somewhere in the above script. I placed it right after the c.setAttribute('href','http://sfx3.exlibrisgroup.com:9003/ syracuse'+'?'+c.name); section.

Posted by Tom on February 18, 2005