Matthias Shapiro

microsoft windows phone evangelist, infovis enthusiast

Windows Phone HTML 5 App Basics

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.

This entry was posted in HTML5, Windows Phone, Windows Phone 8. Bookmark the permalink.

10 Responses to Windows Phone HTML 5 App Basics

  1. Pingback: Dew Drop – November 27, 2012 (#1,450) | Alvin Ashcraft's Morning Dew

  2. Pingback: Camera Launching From HTML App In Windows Phone | Matthias Shapiro

  3. Pingback: Debugging an HTML5 Windows Phone App | Matthias Shapiro

  4. Pingback: Weekly Links – 12-3-2012 | Matthias Shapiro

  5. hscmrwg rnhnsbbiktu tpdtwvwo ardhwzzrtcj cjuuxwxrk qdrkbs rzedlp acvjrn hfnwukwqhw

  6. Tim

    HI,
    I am a newbie coming from IOS and Android and trying to replicate a feature in those apps where I use a username and password that is saved in preferences (isolatedstorage) and inject it into the javascript of the https web page.

    In android I did the following:
    view.loadUrl(“javascript:document.getElementById(‘Login1_UserName’).value=’”+userName+”‘;javascript:document.getElementById(‘Login1_Password’).value = ‘”+password+”‘;”);
    view.loadUrl(“javascript:document.getElementById(‘Login1_LoginButton’).click();”);

    and I am trying to do it in Visual Studio 2012 but its not working. Here is my code:

    Browser.Navigate(new Uri(mainUrl, UriKind.Absolute));

    Browser.InvokeScript(“eval”, new string[] { “document.getElementById(‘Login1_UserName’).value = ‘”+username+”‘ , document.getElementById(‘Login1_Password’).value = ‘”+password+”‘;”});
    Browser.InvokeScript(“eval”, new string[] { “document.getElementById(‘Login1_LoginButton’).click();”});

    But it just wont work. So my questions are two:

    1. If I want to create a small script as you described do I add a resource file to my project or add it as a block of code in my mainpage.xaml.cs?
    2. If I do as above, is there an issue with my syntax?

    Many thanks for any pointers you may be able to give to help.

    Thanks

    Tim

  7. I was recommended this blog by means of my cousin. I’m not
    sure whether this publish is written by way of him as nobody else recognise such precise about my problem.
    You’re amazing! Thanks!

    my web site; seo services noida

  8. Thank you so much for pointing me to
    The confusing part for me is method Browser_Loaded contains a line “Browser.IsScriptEnabled=True;” … one could think it does not matter where to maintain script-enabling

  9. EngDev

    How to inject javascript at runtime to web browser in windows phone without knowing any information about html file ?

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>