Invoking JavaScript From Windows8 App Inside WebView Page

Jun 21, 2013


In the previous blog post, we looked at basics of the WebView component. Once you are comfortable with the basic operations, you would want to perform some advanced operations. In this bog post we will examine two such advanced scenarios.

The key function we will be using to invoke the script on our HTML page is InvokeScript function provided by WebView Component.

I am using the Project we built in previous blog post. You might want to quick read through that to follow along with this post.

Adding HTML page into our Windows 8 Store Application Project

First off, let's start by creating a new HTML page in your application. I have added this HTML page in the Asset Folder.

Adding HTML Page

I have kept the HTML page as simple as possible. All it has is a Div with ID paramDiv and a simple JavaScript function SayHello.

 





    
    

    



    

This is the Testpage.html Located under Assets folder in our Windows8 Project.


Parameter From Windows 8 App :

The JavaScript function expects a parameter and assigns the value of the incoming parameter as the innerHTML property of the Div.

Loading Local HTML Page In Windows 8 Application

I have added two buttons on the MainPage.xaml. One to load our HTML page into the WebView Component. And the other button we will use to InvokeScript on our HTML page.

 
    
        
            
            
                
        
            

            

            
               
                    
                
    

Following are the events for these new Button's click events.

 

        private void LoadLocal_Click(object sender, RoutedEventArgs e)
        {
            Uri url = new Uri("ms-appx-web:///assets/TestPage.html");
            bingSearchView.Navigate(url);
        }

        private void InvokeScript_Click(object sender, RoutedEventArgs e)
        {
            bingSearchView.InvokeScript("SayHello", new string[]{"Test Param"});
        }

On the LoadLocal button's click event we are generating the Uri to our local HTML page Testpage.html. This loads our HTML page into the WebView Control.

Invoking JavaScript From WebView Control

The second button's click event is actually invoking the SayHello function defined on or Testpage.html which internally sets the incoming parameter Value as the innerHTML property of the Div.

 

        private void InvokeScript_Click(object sender, RoutedEventArgs e)
        {
            bingSearchView.InvokeScript("SayHello", new string[]{"Test Param"});
        }

Go ahead and run the application. Click the Load Local button first and once the page is loaded, click the InvokeScript button and you should see something similar to following scree shot.

Adding HTML Page

Passing Multiple Values on HTML page from WebView Control

So, what if we want to pass multiple parameters form our Windows 8 Store Application to our HTML page ? If you have noticed in our third button's click event, InvokeScript's second parameter takes Array of string. And that's exactly what we need to pass multiple parameters to our HTML page.

I have modified our HTML Page to have to Input boxes and we will passing two parameters form our WebView Control to the page.

JavaScript Function

Also we have modified the XAML page to have an extra button which will invoke our above highlighted JavaScript function FillUserInfo.

Add New Button

Button's Click event

Go ahead and run the application. Load the page and once it is loaded completely, click the Add User Info button, and it should fill out the values in those textboxes as below.

InvokeScript<em>Multiple</em>Parameters