Android: HTML Anchor Link Works Only Once in Webview

Android : Html Anchor Link works only once in webview

The problem was to Reload the Page again after Anchor link Click.

I have used the following code,

chapters.xml in Assets folder

<html>
<body>
<p><a href="#C4">See also Chapter 4</a></p>
<p><h2><a name='C1'>Chapter 1<a></h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2><p>This chapter explains ba bla bla</p>
<h2><a name='C4'>Chapter 4</a></h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2><p>This chapter explains ba bla bla</p>
<a href="#C1">See also Chapter 1</a>
</body>
</html>

JAVA code : First Way

public class MainActivity extends Activity {
    WebView myWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        myWebView = new WebView(this);
        myWebView.getSettings().setJavaScriptEnabled(true);
        myWebView.loadUrl("file:///android_asset/chapters.html");

        setContentView(myWebView);

        final GestureDetector gestureDetector = new GestureDetector(
                new MyGestureDetector());
        View.OnTouchListener gestureListener = new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                return gestureDetector.onTouchEvent(event);
            }
        };
        myWebView.setOnTouchListener(gestureListener);
    }

    class MyGestureDetector extends SimpleOnGestureListener {
        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            myWebView.reload();
            Log.i("", "Reload");
            return super.onSingleTapConfirmed(e);

        }
    }
}

EDIT JAVA CODE : Second Way - I have tried this thing insted onTouchListener and that working fine for me.

public class MainActivity extends Activity {
    WebView myWebView;
    public static boolean flag = false;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        myWebView = new WebView(this);
        myWebView.getSettings().setJavaScriptEnabled(true);
        myWebView.loadUrl("file:///android_asset/chapters.html");
        setContentView(myWebView);
        myWebView.setWebViewClient(new WebViewClient() {
            public void onPageFinished(WebView view, String url) {
                if (url.contains("#") && flag == false) {
                    myWebView.loadUrl(url);
                    flag = true;
                } else {
                    flag = false;
                }
            }

        });
    }
}

To Open Another HTML File's Anchor Tag from One file

        myWebView = new WebView(this);
        myWebView.getSettings().setJavaScriptEnabled(true);
        myWebView.loadUrl("file:///android_asset/1.htm");
        myWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                try{
                chapter = url.substring(url.indexOf("#"),url.length());
                url = url.substring(0,url.indexOf("#"));
                }catch (Exception e) {
                    chapter = "";
                }
                myWebView.loadUrl(url);
                return true;
            }
            public void onPageFinished(WebView view, String url) {
                if (!chapter.equalsIgnoreCase("") && flag == false) {
                    myWebView.loadUrl(url+chapter);
                    flag = true;
                } else {
                    flag = false;
                }
            }
        });
        setContentView(myWebView);

Android Webview Anchor Link (Jump link) not working

It looks like the problem is that I had a WebView within a ScrollView. The WebView isn't able to scroll to an anchor link when configured like this. After refactoring my layout to eliminate the ScrollView, the anchor links work correctly.

Android: Make anchor links work in WebView inside ScrollView

Since it frustrates me when I stumble upon a question without answers, I will answer my own question, so others will know how I resolved this issue.

Bad news is, this particular issue cannot be resolved. At least, not yet in 2021.

What the company I am working at and the client decided to do is change the entire implementation of this screen. The entire screen is now a WebView, instead of just a part of the screen being a WebView.

named anchor not working webview android

Where does your program fail - with the loading or when you click the anchor? It sounds like the problem is with your HTML file, so you should probably show the code from that instead. :) Also, the full LogCat output is handy too. The more info the merrier.

I recently implemented a WebView, the HTML code is extremely straight-forward (since I know close to no HTML and just wanted an easy way to display documentation). A simple anchor is just this for example:

<a href="#q1">Navigating the application</a>

...

<a name="q1"></a> 
<p><b>Navigating the application</b></p> 
<p>...sliding motion (to the left or to the right) with your finger...</p>

If your program is failing at the actual loading part, then ensure that you have placed the topics.html file correctly in the /assets/ folder in your project folder. It has to be at the very root of your project folder - ie. workspace\<projectname>\assets\topics.html

Your code for loading the webpage looks fine.

Android Webview, working with Anchors

Try using valid URL as a base URL in loadDataWithBaseURL(), such as app://myhtml.

Also, to make sure the data was loaded implement WebViewCLient.onPageFinished().

Links sometimes not working in WebView

This seems like a ridiculous work around but I guess it works. The first time the WebView loads, if you load a blank dummy html file like

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

before you load anything else, it appears to fix the problem. It also looks like the dummy file has to load completely first, not just start loading.

Using loadDataWithBaseURL disables links in webview

Seems the issue was not related to baseURL but to the css file connected to the WebView. In the absence of the baseURL, the css file was not loaded which enabled the footnotes to be clickable.

the line of code in the css file that was causing the issue was:

pointer-events: none;

So if anyone is looking for a way to make the webview non interactive, this is one way of doing so.

Thanks for every person that has contributed to this question.

Strange behavior of Android WebView with center tag in Samsung devices

Ben is right, the center tag is not standard HTML5, so you can't expect it to work properly. The best solution, if you can, is getting rid of the center tag. But if that's not the case you can just "force" the center tag to be centered with css. Add the following to your stylesheet and it should be fixed:

center {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

Android: HTML Anchor Link Works Only Once in Webview