[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
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2019-04-16T13:58:31.000+0000 |
Affected Version/s | Release 8.0.0 |
Fix Version/s | Release 8.0.1 |
Components | iOS |
Labels | WebView, engSchedule, file, html, ios, regression |
Reporter | Joshua Quick |
Assignee | Vijay Singh |
Created | 2019-03-27T19:25:07.000+0000 |
Updated | 2020-04-02T13:08:39.000+0000 |
Description
*Summary:*
As of Titanium 8.0.0, a call to Set
Notice that 3 of the 4 images fail to load within the
tiapp.xml
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:*
Create a Classic "Default Project" Titanium app.
Set <use-app-thinning/>
to false
in the "tiapp.xml" as shown below.
Copy the below code to the project's "app.js".
Build and run on iOS.
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.
PR(master) - https://github.com/appcelerator/titanium_mobile/pull/10818 PR(8_0_X) - https://github.com/appcelerator/titanium_mobile/pull/10819
FR Passed, waiting on Jenkins build.
Merged to 8_0_X. Waiting for a clean build on master PR...
merged to master as well
Closing ticket. Fix verified in SDK version
8.1.0.v20190416001251
and SDK version8.0.1.v20190415060903
. Test and other information can be found at: PR(master) - https://github.com/appcelerator/titanium_mobile/pull/10818 PR(8_0_X) - https://github.com/appcelerator/titanium_mobile/pull/10819This is no longer working in 8.3.0.GA-9.0.0.GA, is there any reason for that?