In page (html) anchors don't work - they interfere with history tokens

[tanteanni]

This question could also be answered here  :-).

I want to add a html-document to a view. the html page contains an toc with anchors <a href="#Chapter1">Chapter 1</a> and <a name="Chapter1">Chapter 1</a> (very oldschool html). The problem is that on click on an item in toc gwt interprets this as "goTo(Place with token chapter1)" - the link is interpreted as <adress to webapp/#chapter1>  and this obviously fails.

So how to add such html to a gwt widget and make the anchors work as expected (probably all anchors must be modified in some way?)? in meantime i tried wrapping the html in a frame - with no avail.

[David]

I'm not quite sure what you are trying to do.   If your hrefs are meant to be page request then lose the hash.   However if your hrefs are truly meant to be targeted as history tokens then you can try something like :

<g:InlineHyperlink targetHistoryToken="chapter1" ui:field="simpleTab">Chapter 1</g:InlineHyperlink>

[Jens]

Have you tried to attach an event listener (DOM.addEventListener()) to these anchors and call ClickEvent.preventDefault() when you click on them? That could suppress the history change and you can scroll your html document yourself by reading the href attribute and searching the anchor you need to scroll to. But don't forget to remove the event listener if you don't need the html anymore.

If ClickEvent.preventDefault() does not work you need to modify your anchors to

<a data-scrollTo="chapter1" class="linkStyle">Chapter 1</a>

or use <div> instead of <a> because you can't use href anyways. So remove the href attribute and put the information in a custom attribute. Your click handler would use the custom attribute to get the information where to scroll to.

Obviously you have to do the scrolling yourself (Element.scrollIntoView()). 

In modern browsers you could maybe use HTML5 pushState instead of hash tokens for history management. In that case you probably don't have to change anything in your html document. But if you want IE compatibility this is not an option.

-- J.

[Richard]

That's quite something. The hashtag was originally meant for the use tanteanni intends (jumping to points within a document), but it's been so heavily abused that we now have to write workarounds to get the original behaviour back.

[Andrei]

I think it is possible to attach a single ClickHandler to the HTML widget containing the HTML document. When clicked call preventDefault(), as Jen suggested, look at the source of the click, and if it is your anchor, scroll to the cursor position.

[Andrei]

Something like this:

myHTMLWidget.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        event.preventDefault();
        Element e = Element.as(event.getNativeEvent().getEventTarget());
        if (e.getAttribute("href").contains("#")) {
            e.scrollIntoView();
        }
    }
});

[tanteanni]

thx i'll try it,

until now i thought "normal" html works flawlessly within gwt webapp but in this case i am disabused.

[tanteanni]

can you explain how to use the html5 feature you mentioned?

[Jens]

Someone else already explained it ;-) 

http://carlosaguayo.posterous.com/html5-history-in-gwt

Also read the two comments on that page.

-- J.