[TIMOB-10323] MobileWeb: WebView - Ti is not defined in a script in a webview

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2014-03-23T02:24:29.000+0000
Affected Version/s	Release 3.0.0, Release 3.2.0
Fix Version/s	2014 Sprint 05, 2014 Sprint 05 Tooling, Release 3.3.0
Components	MobileWeb
Labels	core, mobileweb, qe-closed-3.3.0, qe-testadded, supportTeam
Reporter	Jon Alter
Assignee	Chris Barber
Created	2012-08-06T11:25:31.000+0000
Updated	2014-05-06T23:07:40.000+0000

Description

Unable to run anything Ti in a webView (We should be able to use info and fireEvent).

Steps to reproduce:

1. Run the code below 2. notice the error: "Ti is not defined"

app.js

var win = Ti.UI.createWindow();
win.open();

var webView = Ti.UI.createWebView({
	url: 'test.html'
});
win.add(webView);

test.html

<html>
<head>
	<title>Webview Logging</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script>

	Ti.API.log("info","1. webview: this should go to DEBUG log");
	Ti.API.info("2. webview: this should not crash. double backslashes: \\\\");
	Ti.API.info("3. webview: this should not crash. carriage returns \n\r");
	Ti.API.info("4. webview: this should not crash. forward slashes: //");
	Ti.API.info("5. webview: this should not crash. urls! http://www.appcelerator.com/?foo=bar&t=1^");
	Titanium.API.info("6. webview:Welcome  餵 こんにちは 안녕하세요 Привет Γειά हैलो สวัสดี שלום");
	Titanium.API.info("7. webview:Testing various unicode encodings: ⓼ ⑆ ش Ⴔ € ぇ ⌘ ᚎ ᑺ ༀ Җ ℥ \"'\" ?");
	Ti.API.info("8. webview: this should not crash. kanji: ド標準第5版の刊行を大いに");

	// TEST for backslash encoding issue over the bridge
	Titanium.API.info("9. webview:Testing Backslash => {\\}");
	Titanium.API.info("10. webview:Testing New Line => {\n}");

	</script>
</head>
<body>
	<div>Look at the log and make sure you see 10 log statements with webview: prefix.</div>
	<div>Look ma... UTF-8</div>
	<div> 餵 こんにちは 안녕하세요 Привет Γειά हैलो สวัสดี שלום</div>
	<div> ⓼ ⑆ ش Ⴔ € ぇ ⌘ ᚎ ᑺ ༀ Җ ℥</div>
	<div> ド標準第5版の刊行を大いに </div>
</body>
</html>

Comments

Bryan Hughes 2012-08-09

Edited the wrong ticket by accident.
Chris Barber 2012-08-09

As documented in the Mobile Web limitations wiki page, if you want to execute code in a WebView that uses the Ti or Titanium globals, you MUST wrap your code in an onload handler. Furthermore, some browsers will fire the window.onload event before the iframe's load event, so you'll need to wrap the code again in a setTimeout(): window.onload = function() { setTimeout(function() { Ti.API.log("hi from the webview"); }, 25); };

Jon Alter 2012-09-17

This seeing this issue

test.html

   <html>
   <head>
   	<title>Webview Logging</title>
   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   	<script>
   	window.onload = function() {
   	    setTimeout(function() {
   	        Ti.API.log("hi from the webview");
   	    }, 25);
   	};
   	</script>
   </head>
   <body>
   	<div>Look at the log and make sure you see 10 log statements with webview: prefix.</div>
   	<div>Look ma... UTF-8</div>
   	<div> 餵 こんにちは 안녕하세요 Привет Γειά हैलो สวัสดี שלום</div>
   	<div> ⓼ ⑆ ش Ⴔ € ぇ ⌘ ᚎ ᑺ ༀ Җ ℥</div>
   	<div> ド標準第5版の刊行を大いに </div>
   </body>
   </html>

Chris Barber 2014-03-04

Master pull request: https://github.com/appcelerator/titanium_mobile/pull/5423 3_2_X_hybrid pull request: https://github.com/appcelerator/titanium_mobile/pull/5424

Chris Barber 2014-03-04

Here's the test case:

app.js

   var win = Titanium.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   Ti.App.addEventListener('foo', function (evt) {
   	console.log(evt);
   });
   
   var webview = Ti.UI.createWebView({
   	url: 'test.html'
   });
   
   win.add(webview);
   
   win.open();

test.html

   <!DOCTYPE html>
   <html>
   <body>
   
   <script>
   window.onload = function () {
   	setTimeout(function () {
   		Ti.API.log('it works!', Date.now());
   	}, 0);
   
   };
   
   function foo() {
   	Ti.API.log('it works!', Date.now());
   	Ti.App.fireEvent('foo', { data: 123 });
   }
   </script>
   
   <button id="mybutton" onclick="foo()">click me</button>
   
   </body>
   </html>

Expected Result

In the console:

   [INFO] Appcelerator Titanium 3.3.0 Mobile Web
   [INFO] it works! 1393968546491

Then click the button:

   [INFO] it works! 1393968547423 (index):2591
   Object {data: 123, source: Object, type: "foo"}

NOTE: The number is a timestamp that will obviously be different for you.

Olga Romero 2014-05-06

Used [~cbarber] test case Mac osx 10.9.2 Mavericks Appcelerator Studio, build: 3.3.0.201405011408 Titanium SDK, build: 3.3.0.v20140505115416 Node.JS Version: v0.10.13 NPM Version: 1.3.2 acs@1.0.14 alloy@1.4.0-dev npm@1.3.2 titanium@3.3.0-dev titanium-code-processor@1.1.1 Safari 7.0.3 Chrome 34.0.1847.131 Verified the expected result is correct.

JSON Source