Titanium Alloy Webview Ti.App.fireEvent NOT working

2
votes

I am unable communicatefrom a WebView to Titanium using Alloy? It seems like it worked in the past Ti.App.fireEvent(), but in a new Alloy project it does not work. Yes, I've read these docs, but they seem to be out of date: https://wiki.appcelerator.org/display/guides/Communication+Between+WebViews+and+Titanium When using alloy there is no app.js file - only a alloy.js file. If anyone has an example of this working in ALLOY this would be great! Here is what I have tried.

webview.html

  <html>
  <head>
    <script type="text/javascript">
    function fire(e){
      alert("Before Ti.App.fireEvent");
      Ti.App.fireEvent("fromWebview",{});
      alert("After Ti.App.fireEvent");
    }
    </script>
  </head>
  <body>
  <a href="#" onClick="fire()">Click this link to execute the fire() function</a>
  </body>
</html>

index.xml 

<Alloy>
    <Window id="w_history">
            <WebView id="webview" url="/webview.html" />
    </Window>
</Alloy>

index.js

Ti.App.addEventListener('fromWebview',function(e){
  alert("Clicked from Web");
});

$.w_history.open();

f I run the code only die alert before the Ti.App.fireEvent fires - the alert after does not? I guess this means the Ti.App.fireEvent is not being executed and breaks the function?

I have been stuck on this the whole day! Any help would be appreciated! Thanks

2
javascriptandroidwebviewtitaniumtitanium-alloy

2 Answers

0
votes

I copied your code into index.js, index.xml and assets/webview.html and run it on both Android and iOS simulator. All alerts were fired, so your error has to be somewhere else.

0
votes

This seems to have gotten it working... In the HTML file I had to define the var Ti = window.parent.TI inside the function

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style> html, body { margin: 5px; padding: 0px; } p {margin: 0; text-indent: 9.0pt;font-size: 13pt;line-height: 15pt;}sup{vertical-align: super;color: black;font-weight:bold;margin-right:3px;font-size: 8pt;}</style>
    <script type="text/javascript">
    function fire(e){
    var Ti = window.parent.Ti;
    alert("Before Ti.App.fireEvent");
      Ti.App.fireEvent("fromWebview",{});
      alert("After Ti.App.fireEvent");
    }
    </script>
  </head>
  <body>
  <a href="#" onClick="fire()">Click this link to execute the fire() function in the embedded script of this local page</a>
  </body>
</html>