目录

How do I add parameters to a URL when the Web component uses rawFile to load offline HTML files?

When the Web component is used for loading, you can directly add parameters to the URL. After the loading, the parameters are obtained and used on the HTML5 side.

Reference code

The Web component uses rawFile to load offline HTML. The URL is added with parameters.

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'resource://rawfile/LoadingURLTransferParameters.html?key=value', controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
    }
    .width('100%')
    .height('100%')
  }
}

The HTML5 side can obtain and use the parameters in the URL as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Parameter-based HTML</title>
</head>
<body>
<h1>Welcome!</h1>
<h1 id="params"></h1>

<script>
    function getParams() {
        var params = {};
        window.location.search.substring(1).split('&').forEach(function(param) {
            var pair = param.split('=');
            params[pair[0]] = decodeURIComponent(pair[1]);
        });
        return params;
    }
    document.getElementById('params').innerHTML = JSON.stringify(getParams());
</script>
</body>
</html>