Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26943

iOS: WebView.setHtml() fails to load inner contents with "file://" URLs and relative paths if "baseURL" uses "app://" URL as of 8.0.0

    Details

    • Story Points:
      5
    • Sprint:
      2019 Sprint 8, 2019 Sprint 9

      Description

      Summary:
      As of Titanium 8.0.0, a call to WebView.setHtml() with a "baseURL" set to an "app://" URL such as Ti.Filesystem.resourcesDirectory will fail to load HTML content such as <img/> or <script/> if they're assigned relative paths or "file://" URLs.

      This is not an issue if:

      • "baseURL" is set to a "file://" URL.
      • If "baseURL" was never assigned in the setHtml() call.
      • If the contents such as <img/> use an "app://" URL instead, but this is not support on Android or Windows.

      Steps to reproduce:

      1. Create a Classic "Default Project" Titanium app.
      2. Set <use-app-thinning/> to false in the "tiapp.xml" as shown below.
      3. Copy the below code to the project's "app.js".
      4. Build and run on iOS.
      5. Notice that 3 of the 4 images fail to load within the WebView.

      tiapp.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <ti:app xmlns:ti="http://ti.appcelerator.org">
      	<use-app-thinning>false</use-app-thinning>
      </ti:app>
      

      app.js

      var sourceFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "assets/images/tab1.png");
      var targetFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, "tab1.png");
      sourceFile.copy(targetFile.nativePath);
       
      var htmlText =
      		'<!DOCTYPE html>\n' +
      		'<html>\n' +
      		'	<head>\n' +
      		'		<meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
      		'	</head>\n' +
      		'	<body>\n' +
      		'		<p>Resource File (Relative Path)</p>\n' +
      		'		<img src="assets/images/tab1.png"/>\n' +
      		'		<br/>\n' +
      		'		<p>Resource File (app:// URL; iOS-only)</p>\n' +
      		'		<img src="app://Resources/assets/images/tab1.png"/>\n' +  // <- This works.
      		'		<br/>\n' +
      		'		<p>Resource File (file:// URL)</p>\n' +
      		'		<img src="' + sourceFile.nativePath + '"/>\n' +
      		'		<br/>\n' +
      		'		<p>App Data File (file:// URL)</p>\n' +
      		'		<img src="' + targetFile.nativePath + '"/>\n' +
      		'	</body>\n' +
      		'</html>\n';
      Ti.API.info("### htmlText:\n" + htmlText);
       
      var window = Ti.UI.createWindow();
      var webView = Ti.UI.createWebView({
      //	html: htmlText,  // <- This works.
      });
      //webView.setHtml(htmlText);  // <- This works.
      webView.setHtml(htmlText, { baseURL: Ti.Filesystem.resourcesDirectory });  // <- This fails!!!
      //webView.setHtml(htmlText, { baseURL: Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory).nativePath });  // <- This works.
      window.add(webView);
      window.open();
      

      Work-Around:
      Set "baseURL" to a "file://" URL instead. For example instead of doing this...

      webView.setHtml(htmlText, { baseURL: Ti.Filesystem.resourcesDirectory });
      

      ...do this instead...

      webView.setHtml(htmlText, { baseURL: Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory).nativePath });
      

      Alternatively, don't set the "baseURL" in the setHtml() function call. By default, the HTML's contents are relative to the Titanium app's "Resources" directory.

        Attachments

          Activity

            People

            • Assignee:
              vijaysingh Vijay Singh
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Jan Vennemann
              Tester:
              Samir Mohammed
            • Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-21129
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code