Anchor link won't work on mobile app

Anchor link won't work on mobile app

  

I am embedding an html within a div on my mobile app. It works, and the content is displayed just fine.

But I have an issue if this html has anchor links in it. When I click one of these links the document gets scrolled down to the anchor element and then the app navigates to the page "mypage?param=10#mytag". Which is an invalid page because there is no "10#mytag" parameter.

Thing is, react's router engine treats all the links as navigation events, ignoring the expected behaviour for anchor links.

I've been reading, and acording to the link below, I'd need to use a react component (hash link).

Has anybody faced this issue? Any other way out?

https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4

A workaround that I can think of is to find all the anchors that has hash (thru regex?) and replace it with a custom behavior that will make it scroll into an element. Something like

document.getElementById("hash").scrollIntoView()



I've tried something similar (with window.scrollTo()), but reactJs still reacts to that click with a navigation event. The document gets scrolled to the anchor position, but half a second after that, it navigates to the page I mentioned in the post.

is it the anchor causing it? maybe can be replace by span with a style similar to an anchor.

Actually it's related to the click on an "<a href" tag. It's always interpreted by react router engine as a navigate link. Have a look at this: https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4

Solution

yes but what I am trying to suggest is if you can replace the anchor tag with a span tag and have an onclick to it so that you won't experience the issue. I am assuming that a replacement can be made before binding to the div

Solution

I'll give it a try.

John, it worked like a charm! Thank you very much for your help.

Here is what I needed to do. But your 2 tips combined made the trick. In summary one needs to use this workaround. Replace the "a" tag with any other html tag with an onclick javascript scrollIntoView function bound to it.

Here is my code so it can help others:

As I have my html embedded in an iframe, I needed to hack the iframe a bit.

var iframe = document.getElementById('IFrame');
var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

var links = doc.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    if (links[i].href.indexOf('#') > -1) {
        var outer = links[i].outerHTML;
        outer = outer.replace("<a ", "<span class='SpanClick' data-");
        links[i].outerHTML = outer.replace("</a>", "</span>");
        i--;  // needed because I'm changing the loop elements
    }
}

var links = doc.getElementsByClassName('SpanClick');

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
        var dataHref = this.getAttribute('data-href');
        var hashPosition = dataHref.indexOf('#');
        var href = dataHref.substring(hashPosition + 1, dataHref.length);
        var iframe = document.getElementById('IFrame');
        var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
        doc.getElementsByName(href)[0].scrollIntoView();
    }
}

Welcome. Just one comment on the replace. There could be external links that will contain "#", I will suggest to be more specific on the index location.