How to display some HTML text in a webviewer

How to display some HTML text in a webviewer

For the example, I uploaded a html page as asset into App Inventor, see below.

There is one special thing to consider for HTML documents uploaded as assets into App Inventor: During development, you have to use the development path to the embedded HTML document.
file:///mnt/sdcard/AppInventor/assets/webviewstring.html

Before building the app, use the production path.
file:///android_asset/webviewstring.html


HTML file
<!DOCTYPE html>
<html>
<head>
  <meta name="author" content="puravidaapps.com">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Label</title>


  <script src="jquery-1.8.0.min.js"></script>
  <script>
  // urldecode function, which also handles the case of spaces being encoded as +
  // http://stackoverflow.com/a/4458580/1545993
  function urldecode(str) {
    return decodeURIComponent((str+'').replace(/\+/g, '%20'));
  }
  </script>

</head>

<body>
  <script>
    // get the text to display from the webviewstring, urldecoded
    var strLabel = urldecode(window.AppInventor.getWebViewString());


    // append the text to the body of the html document
    $("<div>" + strLabel + "</div>").appendTo("body");
  </script>
</body>
</html>

Note: To use this example, you have to upload the library jquery-1.8.0.min.js into the assets of your project. You can find the library in the assets of the example project downloadable below or on the official jQuery download page.

Comments

Post a Comment