SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Web Annotator : Getting the Document to Edit

To invoke adding comments or annotations to a page the user first adds a bookmarklet to their browser that points to our application. This is accomplished by dragging a peculiar looking link that contains our code; to the users Links bar as shown below:


figure 2 Bookmarklet link

Inside the Bookmarklet we have code that executes when the user selects the bookmarklet button. The code in the bookmarklet is a simple javascript URL that invokes our Annotator application and passes a query string to the frames.asp page. The querystring contains the location of the document the user wants to add annotations to and looks like this: 

javascript:window.navigate('http://uniquest01/Annotator/Samples/Frames.asp?loc='+document.location.href)

The frames.asp page checks to see if the querystring is present and attempts to load the page into it's main frame 

<%@language= VBscript%>
<html>
<head>
<title>Web Annotator</title>
</head>
<%
 'check querystring "loc" for url to add
  URL = Request.QueryString("loc")
  If URL = "" Then
    URL = "Main.htm"
  end if%>
  <frameset cols= "170,*">
  <frame name= "contents" target = "main" src= "Contents.htm"> 
  <frame name = "main" src ="<%=URL%>">
  <noframes>
  <body> 
  <p>
  This page uses frames, but your browser doesn't
  support them.
  </p> 
  </body> 
</noframes>
</frameset>
</html>


* A note about framesets:
If the document the user wants to edit, is itself in a frameset, the application will attempt to load the whole frameset. For the application to work properly the document must not be included in a frameset.

What about the bookmarklet link?
The bookmarklet code looks like this: 
<A  onclick= 'event.returnValue = false'
    href="javascript:window.navigate('http://uniquest01/Annotator/Samples/Frames.asp?loc='+document.location.href)"> 
Annotator Bookmarklet
</A>

Notice that the anchor has an onclick handler assigned. The line "onclick=event.returnValue=false" informs Internet Explorer to cancel any events associated with a click on the anchor. If the link had been clicked without this, it would have produced an error because the link is a javascript url and not a navigable resource on the page hosting it.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.