Android：Html Anchor Link 在 webview 中只工作一次答案

【问题标题】：Android : Html Anchor Link works only once in webviewAndroid：Html Anchor Link 在 webview 中只工作一次
【发布时间】：2012-06-26 15:36:23
【问题描述】：

在加载带有锚链接的 html 内容时，我在 webview 中遇到了一些奇怪的问题。
以下代码非常适合锚标记，但只有一次。
第二次按下锚标签时，它不起作用。

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mywebview);

        String html = "<html><body><p><a href='#C4'>See also Chapter 4</a></p><p><h2>Chapter 1</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><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p></body></html>";
        String mime = "text/html";
        String encoding = "utf-8";

        WebView myWebView = (WebView)this.findViewById(R.id.webView1);
        myWebView.loadDataWithBaseURL(null, html, mime, encoding, null);

    }

我尝试了this 链接，但对我不起作用。

更新：

我的代码在各种设备上的测试结果。

工作
1. 三星 S Plus --> 2.3.4
2. 三星 Galaxy Y --> 2.3.6
3. 三星 Galaxy Tab --> 2.3.3
4. 摩托罗拉 Xoom --> 3.2

不工作
1. LG 擎天柱 --> 2.2
2. DELL XCD35(ZTE Blade) --> 2.2
3. HTC WildFire --> 2.2.1

这是操作系统问题还是其他问题？有什么解决办法吗？？

【问题讨论】：

所有@DownVoters 你能解释下投票的原因吗？

标签： android html android-webview

【解决方案1】：

问题是点击锚链接后重新加载页面。

我使用了以下代码，

资产文件夹中的chapters.xml

<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 代码：第一种方式

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);

        }
    }
}

编辑 JAVA 代码：第二种方式 - 我已经试过这个东西 insted onTouchListener 并且对我来说工作正常。

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;
                }
            }

        });
    }
}

从一个文件中打开另一个 HTML 文件的锚标记

        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);

【讨论】：

这似乎不是一个可行的解决方案。因为用户可能必须触摸 webview 中的任何位置，所以它每次都会重新加载 webview。
现在检查更新的答案，重新加载仅在用户点击时完成。如果您仍然对输出不满意..您当然可以删除绿色复选标记..以便其他用户知道您仍在寻找更好的答案，我不会介意..我也会继续尝试:)
使用您的标志变量，我刚刚设法解决了 4.1.1 中的一个问题，当时页面在锚点周围不断刷新。

【解决方案2】：

请尝试使用此代码。它工作正常。

   String html = "<html><body><p><a href='#C4'>See also Chapter 4</a></p><p><h2>Chapter 1</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><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p></body></html>";
    String mime = "text/html";
    String encoding = "utf-8";

    final WebView myWebView = (WebView)this.findViewById(R.id.webView);
    myWebView.getSettings().setJavaScriptEnabled(true);
    myWebView.loadDataWithBaseURL("app:html", html, mime, encoding, null);

    myWebView.setWebViewClient(new WebViewClient() 
    {  
       @Override  
       public void onPageFinished(WebView view, String url) 
       {
           super.onPageFinished(view, "app:html");
           view.loadDataWithBaseURL("app:html", html, mime, encoding, null);
       }  
    });

【讨论】：

+1 表示非常好的尝试，但使用您的代码，在模拟器中进行测试有时会起作用，并在 2-3 次点击后再次停止，再次开始工作并且在 HTC 设备中根本不起作用，告诉我是否我的测试是错误的。
@Chirag Raval 它有效。谢谢.. 但有时需要点击链接两次或更多次。

【解决方案3】：

此问题发生在 Android 4.0.3 和 4.0.4 设备上：如果您有一个内容填满整个屏幕宽度的移动网页（在资产中或从 Web 加载），则一些链接如下：

<a href=... HTML links

...行不通！他们将无法加载下一页！有点奇怪。

错误记录在这里：http://code.google.com/p/android/issues/detail?id=929

即使它是在 2009 年登录的，它仍然会在 Android 4.0.3/4.0.4 设备上发生。

解决办法是不使用：

android:layout_height="wrap_content 在 WebView 上。

替换为：

android:layout_height="match_parent

【讨论】：

【解决方案4】：

试试这个简单的 2-liner javascript

<html>
<body>
<head>
<script language="javascript">
      function jump_top() {
          location.href = "#top";
          location.hash = "";
      }
</script>
</head>

<body>
<a name="top"></a>
<br /><br /><br /><br />
...
<br />Now you are at the bottom of the page
<br />
<a onclick="jump_top()">To Top</a>
</body>
</html>

【讨论】：