WebView jump to anchor using loadDataWithBaseUrl

When loading HTML content in WebView, we may need to directly navigate to a specific anchor point on the page. The loadDataWithBaseUrl method allows setting a base URL while loading data, which is particularly well-suited for handling such cases.

Steps Overview

Define HTML Content: First, define your HTML content and ensure it includes anchor points.
Use the loadDataWithBaseUrl Method: Load the HTML content using this method and set the appropriate base URL.
Navigate to Anchor Point: After the HTML content is loaded, use JavaScript or an appropriate method to navigate to the specific anchor point.

Example

Suppose you have the following HTML content:

html
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1 id="top">Page Top</h1>
<p>Some introductory content...</p>
<h2 id="anchor-point">Important Anchor Point</h2>
<p>You want to directly navigate here.</p>
</body>
</html>

You want to load this HTML in WebView and directly navigate to the section with ID anchor-point.

Java Code Example

java
WebView webView = findViewById(R.id.webview);

String htmlContent = "<html><head><title>Example Page</title></head><body>..."
    + "<h1 id=""top">Page Top</h1>"
    + "<p>Some introductory content...</p>"
    + "<h2 id=""anchor-point">Important Anchor Point</h2>"
    + "<p>You want to directly navigate here.</p>"
    + "</body></html>";

String baseUrl = "file:///android_asset/";

// Load HTML content
webView.loadDataWithBaseURL(baseUrl, htmlContent, "text/html", "UTF-8", null);

// Navigate to anchor point using JavaScript
webView.loadUrl("javascript:window.location.hash='#anchor-point'");

Notes

Base URL Setting: Ensure that the baseUrl correctly points to the base path of your HTML content, which is critical for loading resources like images and CSS.
JavaScript Support: Since JavaScript is used to navigate to the anchor point, ensure that JavaScript is enabled in WebView.
Post-Load Navigation: Ensure that the JavaScript code for navigating to the anchor point is called after the page has fully loaded. This can be achieved using the onPageFinished method of WebViewClient.

By using this approach, we not only load the HTML content but also achieve direct navigation to anchor points within the page using loadDataWithBaseUrl.

2024年6月29日 12:07 回复

1个答案

Steps Overview

Example

Java Code Example

Notes

你的答案