[whatwg] anchor(jump) DOM Event proposal

Loune lpgcritter at nasquan.com
Tue Feb 28 04:09:01 PST 2006


I don't know if this has been addressed or not, since I only briefly 
scanned the spec. Hopefully, I didn't write this for nothing :)
This relates to the handling of anchors in URLs:

A common argument or complaint against AJAX is that it renders the back 
and forward buttons useless and thereby interrupting the normal flow of 
browsing. It is also impossible to bookmark the state of the page [due 
to the URL remaining the same]. Normally, navigating to a new URL will 
result in the browser performing a new request to the server, but there 
is one exception to that - which is invoking an anchor via # suffix. 
Traditionally, the suffixes are used to jump to the location which the 
invisible anchor is located.

My proposal is to extend anchoring into a scriptable feature with the 
addition of the anchor DOM Event. The anchor event will be fired every 
time the page URL stays the same but the anchor suffix of the URL 
changes. This basically includes:
- Back and Forward navigation of anchors
- Manually typing a URL/Loading from a bookmark

This is not unlike typical GET query strings where the portion after ? 
are variables passed to the same script on the server, with the main 
difference here being that this acts as a client-side query string. The 
anchor event will be used to perform an action by the JS on the same page.

What the event interface could look like:
interface AnchorEvent : Event {
  readonly attribute DOMString anchorName;
  void initAnchorEvent(in DOMString typeArg,
    in boolean canBubbleArg,
    in boolean cancelableArg,
    in DOMString anchorNameArg);
  void initAnchorEventNS(in DOMString namespaceURI,
    in DOMString typeArg,
    in boolean canBubbleArg,
    in boolean cancelableArg,
    in DOMString anchorNameArg);

Flow of events:
- When the page is loaded, and an anchor event listener exists, the 
anchor event will be fired after the load event. If there is no anchor 
in the URL, the event.anchorName property will be an empty string.
- When an anchor link is clicked, the anchor event listener (if exists) 
will be fired
- The event handler can get the name of the anchor via event.anchorName 
(which will contain the string after the hash)
- If the return value from the handler is true, the traditional form of 
operation (the jumping to the anchor) will occur next; otherwise, that 
step is skipped.
- The UA should act as if the navigation has gone forward a page (add 
history, etc).
- If the user navigates back and the previous page happens to be the 
same page but a different anchor, the anchor event again will be fired 
as if the previous anchor was freshly navigated to. The same logic 
applies to navigating forward.

What this achieves:
With the anchor event handling implemented in a webpage, the page can 
now react to backwards and forwards events of the browser, without 
having to reload the whole page. The user can also bookmark a specific 
state of the page, as specified in the URL.

Comments appreciated,



More information about the whatwg mailing list