Getting Started With Windows Phone 8 HTML5 Apps


I’ve recently been learning to write HTML 5 / Javascript apps for Windows 8 and wanted to take some of that knowledge and transfer it over to Windows Phone 8. As I did so, I learned there are a lot of little “tweaks” that I needed to do to get things working so I thought I’d share those in a post.

If you’d like to follow along, I’m basically just tweaking and adding bits and pieces to the default HTML project available when you’ve installed the Windows Phone 8 SDK.

You can also download the project with all these examples imeplemented.

First of all, one thing I found was that I need to turn on IsScriptEnabled in the WebBrowser control in our MainPage.xaml.

<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />

The template does this, but in the code behind and only after loading the content. We want to run all the Javascript right off the bat so we IsScriptEnabled to be turned on.

Turn Scrolling On or Off

Now we need to decide if we want our HTML app to scroll. In many cases (creating simple HTML content apps) it makes sense to have the app scroll. If this is your scenario, you’re in luck… you have to do nothing.

But in many other cases you might want to turn off scrolling. If you’re creating a game or you want your user to be able to use touch events in a very rich way. In this scenario, you can either turn off scrolling the hard way (also known as the Windows Phone 7 compatible way) or the easy way, which is to go into your phone.css and add:

body { -ms-touch-action:none; }

That takes care of some of our initial setup. Now let’s run some Javascript. We can run Javascript a couple ways.

Javascript: TheTraditional Way

This way we focus entirely on HTML/JS. So if we give our page title an id:

<p id="dynamicTitle">page title</p>

and then we add a script to change that title

<script type="text/javascript"> 
 document.getElementById('dynamicTitle').innerHTML = "running javascript"; 
</script>

we’ll see that text updated at runtime. Super easy.

Run Javascript Function From C#

We can also add a function to our HTML or Javascript files, but leave it up to our C# file to run that script. In this case we would add a function like so:

<script type="text/javascript">
 function changeTitle() { 
 document.getElementById('dynamicTitle').innerHTML = "function initiated in C#"; 
 }

 function changeTitle(someNewText) { 
 document.getElementById('dynamicTitle').innerHTML = someNewText; 
 } 
</script>

And then call that function from our C# using our WebBrowser control.

Browser.InvokeScript("changeTitle");

If our function has parameters, we can add those parameters using InvokeScript

Browser.InvokeScript("changeTitle", new string[]{"change using parameter"});

Add Javascript Using C#

The last way to run Javascript is to just inject it into the page. In this case, we could just update our app using:

Browser.InvokeScript("eval", 
 new string[] { "document.getElementById('dynamicTitle').innerHTML = 'injected javascript';" });

When the question is “which method do I use to run my Javascript” the only real answer is “whichever one fits your scenario”. If you’re writing an app using mostly HTML/JS and just relying on the WebBrowser to act as a container, I’d lean as much as possible on running Javascript in my HTML/JS files.

However if you’re using the WebBrowser in a mixed-code application using C# to do some things and HTML/JS to do others, it might make sense to add some functions as entry-points so we can launch Javascript functions based off of events in the C#.

Talk To the App (C#) From the Browser

Of course, if we’re communicating to the browser from C#, we might want to talk to C# from the browser as well. If you want to send information to C# from the browser, just run the following Javascript code:

window.external.notify("This is a notification from HTML");

and the browser will launch an event called ScriptNotify. We can tell our app to handle that script launch either in the XAML of our WebBrowser:

<phone:WebBrowser x:Name="Browser" 
 ScriptNotify="HTML_Script_Launched" />

Or by assigning it in the xaml.cs file

Browser.ScriptNotify += HTML_Script_Launched;

then we can read out the notification in our event handler. The example below just takes whatever notification we sent and puts it into a MessageBox.

private void HTML_Script_Launched(object sender, NotifyEventArgs e) 
{ 
 MessageBox.Show(e.Value); 
}

We can use this to interact with app-specific functionality like launchers and choosers or launching a MessageBox or perhaps communicating with the app bar.

Comments (5)

  1. Dick Heuser says:

    I need to build support for MRAID compliant ads that will be shown in a WebBrowser control.  MRAID defines a set of 23 methods and 5 events that are to be available for the ad designer to use from their JavaScript.  So, I need to build a library of those 23 JavaScript methods and 5 JavaScript events.  Each of them will use windows.external.Notify to call a C# function that will supply the actual method and return the requested data to the JavaScript function using webBrowser.InvokeScript.

    So the question that has me stumped is how do I load the JavaScript library that I build so those functions are available to the Ad designer?

    My only idea is to dynamically parse the Ad's HTML and inject my JavaScript into the Ad before pointing the WebBrowser control at it but this seems very clumsy and error prone.

    Your ideas and suggestions would be appreciated.

    Thanks,

    Dick

  2. Dick,

    While I'm not a JavaScript expert, I would ask how this is currently done in HTML/JS setting. There shouldn't be any restrictions on making http calls within the WebBrowser itself. Is there something unique about this setting where the WebBrowser is blocking a normal way of interacting with the service?

  3. oddizzo says:

    How 2 invoke this:

    <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>

    On WindowsPhone webbrowser??????

  4. EngDev says:

    How to inject Java script at run time to  web browser Control in windows phone ?

  5. narvinoliphant@outlook. says:

    My new phone compromised I can't use most features getting help More Needed | Thanks.