[TIMOB-27241] iOS: WebView html fails to reload local JavaScript after unload

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	n/a
Reporter	Teun Klijn
Assignee	Eric Merriman
Created	2019-06-20T13:44:53.000+0000
Updated	2019-11-19T15:27:51.000+0000

Description

*Describe the bug* I've a WebView in a ScrollableView. The WebView loads a local html file and a js file. When you scroll to the 3rd or 4th view the WebView will unload its content and it will be reloaded when you go back to the 1st view. This was working fine before 8.0.0.GA. But starting 8.0.0.GA the local JavaScript functions aren't available in the html file after the reload. *To Reproduce*

Press 'Tab 5'

Press 'Tab 1'

Read the console output

+assets/html/test.html+

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=200">
    <script type="application/javascript" src="test.jslocal"></script>
    <script>
      function talk(args) {
        Ti.API.info('talk to me! ' + typeof myFunction);
      }

      function init() {
        Ti.App.addEventListener('app:talk', talk);

        window.addEventListener("unload", function () {
          Ti.App.removeEventListener('app:talk', talk);
        });
      }
    </script>
  </head>
  <body onload="init()"> </body>
</html>

assets/html/test.jslocal

function myFunction() {}

+views/index.xml+

<Alloy>
  <Window>
    <ScrollableView id="scroll" bottom="50" scrollingEnabled="false">
      <View>
        <WebView id="wv" url="/html/test.html" onLoad="onLoad" />
        <Label text="Tab 1" />
      </View>
      <View>
        <Label text="Tab 2" />
      </View>
      <View>
        <Label text="Tab 3" />
      </View>
      <View>
        <Label text="Tab 4" />
      </View>
      <View>
        <Label text="Tab 5" />
      </View>
    </ScrollableView>
    <View height="50" bottom="0" backgroundColor="e1e1e1" layout="horizontal">
      <Button title="Tab 1" onClick="onTab1" width="20%" height="Ti.UI.FILL" />
      <Button title="Tab 2" onClick="onTab2" width="20%" height="Ti.UI.FILL" />
      <Button title="Tab 3" onClick="onTab3" width="20%" height="Ti.UI.FILL" />
      <Button title="Tab 4" onClick="onTab4" width="20%" height="Ti.UI.FILL" />
      <Button title="Tab 5" onClick="onTab5" width="20%" height="Ti.UI.FILL" />
    </View>
  </Window>
</Alloy>

+controllers/index.js+

function onTab1() {
  $.scroll.currentPage = 0;
  $.wv.reload();
  // setting the url directly instead of a reload does work, but I don't want to do that
  // $.wv.url = '/html/test.html'
}

function onTab2() {
  $.scroll.currentPage = 1;
}

function onTab3() {
  $.scroll.currentPage = 2;
}

function onTab4() {
  $.scroll.currentPage = 3;
}

function onTab5() {
  $.scroll.currentPage = 4;
}

function onLoad() {
  Ti.App.fireEvent('app:talk');
}

$.index.open();

*Expected behavior* The console output reads 'talk to me! function' *Actual behavior* The console output reads 'talk to me! undefined' *Environment* iOS; 8.0.0.GA; 8.0.1.GA; 8.0.2.GA

Comments

Rakhi Mitro 2019-07-03

Hello, Thanks for sharing with us. Can you please share console logs and screenshot of the device which displays the issue?
Teun Klijn 2019-07-04

Hello, I'm not sure what more I can share? I already shared the console output in the ticket. Currently the application doesn't display any error, I could edit the example application to display a color with the JavaScript which stops working after the unload if that helps you?

Rakhi Mitro 2019-07-07

[~teunklijn@telfort.nl], Thanks for your feedback. Are you able to run this sample code properly? Please check again and share the runnable code. Getting error running that on iOS device using 8.0.2.GA SDK.

   [ERROR] :  Script Error {
   [ERROR] :      column = 694;
   [ERROR] :      line = 214;
   [ERROR] :      message = "Can't find variable: onLoad";
   [ERROR] :      sourceURL = "file:///var/containers/Bundle/Application/89AD3152-1B91-43D4-9C37-78CF1B454892/rmmAlloyAndroid.app/alloy/controllers/index.js";
   [ERROR] :      stack = "    at Controller(/alloy/controllers/index.js:214:694)\n    at createController(/alloy.js:353:48)\n    at (/app.js:34:23)\n    at global code(/app.js:35:70)\n    at require@[native code]\n    at require(/ti.internal/extensions/binding.js:24:118)\n    at (/ti.main.js:40:8)\n    at loadAsync(/ti.internal/bootstrap.loader.js:152:186)\n    at global code(/ti.main.js:37:52)";
   [ERROR] :      toJSON = "<KrollCallback: 0x2822a9f80>";
   [ERROR] :  }
   [ERROR] :  Script Error {
   [ERROR] :      column = 118;
   [ERROR] :      line = 24;
   [ERROR] :      message = "Module \"app.js\" failed to leave a valid exports object";
   [ERROR] :      sourceURL = "file:///var/containers/Bundle/Application/89AD3152-1B91-43D4-9C37-78CF1B454892/rmmAlloyAndroid.app/ti.internal/extensions/binding.js";
   [ERROR] :      stack = "    at require@[native code]\n    at require(/ti.internal/extensions/binding.js:24:118)\n    at (/ti.main.js:40:8)\n    at loadAsync(/ti.internal/bootstrap.loader.js:152:186)\n    at global code(/ti.main.js:37:52)";
   [ERROR] :      toJSON = "<KrollCallback: 0x2822ba880>";
   [ERROR] :  }

Teun Klijn 2019-07-09

@rmitro The code is running without an error for me, the error that you are seeing is probably because the controller (index.js) implementation is incomplete. The view (index.xml) adds a listener to the webview for the load event, the controller should have this function.
Sharif AbuDarda 2019-07-12

Hello, I was able to verify the issue on SDK 8.0.2.GA in iOS following the steps above. The issue regenerated as described. Tested with CLi 7.0.12. Moving to TIMOB. Thanks.
Teun Klijn 2019-11-19

I've noticed that it does work when I put all the files I want to load in the webview, in the root assets directory. This is less then ideal for me, because I'd like use subdirectories to orden my files. But maybe this helps with finding the cause of this problem.

JSON Source