DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. Windows Store apps - JavaScript & Passing Data To The WebView Control

Windows Store apps - JavaScript & Passing Data To The WebView Control

Gerard Gallant user avatar by
Gerard Gallant
·
Sep. 22, 12 · Interview
Like (1)
Save
Tweet
Share
9.86K Views

Join the DZone community and get the full member experience.

Join For Free
Over the past few weeks, in my spare time, I've been working on building a Windows Store app that will wrap an HTML web app that I've built. 

To use the web app, you enter a token in a textbox on the welcome page and then click the Verify button. 

If the token is valid, a URI is given to the user which can then be used for the tracking of one's time using the start/stop timer view in the web app. 

The issue that we're going to tackle in this blog post is the following: 

When the user clicks the Verify button on the welcome page and a URI is generated, I would like the JavaScript to call the code that holds the WebView control to have the URI saved. 

This will save the user the trouble of having to copy the URI, open up the settings flyout, and paste in the new URI.

I know that with JavaScript, a page loaded in a WebBrowser control can talk to the C# code when the ObjectForScripting option is turned on, but do we have access to a similar feature in a Windows Store app when using a WebView control? 

ScriptNotify and AllowedScriptNotifyUris

As it turns out, it is possible for the JavaScript of a page loaded into a WebView control to call into the C# code of the page if you set up a ScriptNotify event. 

According to the Microsoft documentation on the ScriptNotify event (http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.scriptnotify), depending on which method you use to display the page in the WebView control, you may or may not have to specify URIs that are allowed to call the event handler. 

If you use the WebView's Navigate method then you must specify the list of URIs that are allowed to call the ScriptNotify event handler. 

If you use the WebView's NavigateToString method then the list of URIs is not necessary.

I've been simply setting the WebView's 'Source' property with the desired URI so the question is: Do I need to specify the list of URIs or not? 

As it turns out, if I don't specify the list of URIs when using the WebView's Source property, the ScriptNotify event does not trigger. 

You specify a list of allowed URIs in the following manner:
List<Uri> lstAllowedUris = new List<Uri>(); 
lstAllowedUris.Add(new Uri("http://apps.dovico.net")); 
wvBrowser.AllowedScriptNotifyUris = lstAllowedUris;
Note: The property AllowedScriptNotifyUris almost suggests that you can say one page can make ScriptNotify event handler calls but none of the other pages on the site can. 

In reality, based on my testing, even if you specify a URI to a particular page, any page within that domain can call the event handler. 

The AllowedScriptNotifyUris property is really a list of allowed domains who's pages are allowed to call the ScriptNotify event handler.

The following is an example of how to wire up a ScriptNotify event handler:
public MainPage() 
{
// Only allow the following domain's pages to call our ScriptNotify 
// event handler 
List<Uri> lstAllowedUris = new List<Uri>(); 
lstAllowedUris.Add(new Uri("http://apps.dovico.net")); 
wvBrowser.AllowedScriptNotifyUris = lstAllowedUris; 

// Attach our ScriptNotify event handler 
wvBrowser.ScriptNotify += wvBrowser_ScriptNotify;
}
The following is an example of the event handler itself:
void wvBrowser_ScriptNotify(object sender, NotifyEventArgs e) 
{
// The string received from the JavaScript code can be found 
// in e.Value
}
On the JavaScript side of things, the code is similar to what you would write when calling the C# code of a WebBrowser control with the exception that the function you call is 'notify' where with a WebBrowser control you could define your own callback function name. 

The following is an example of the JavaScript code that calls the C# code:
// We have a couple of checks to make sure the 'external' 
// object and 'notify' method exist before we try using them 
// because our project is a web application and might not be 
// running in a WebView control (the checks prevent 
// JavaScript errors if the method doesn't exist) 
if ((typeof (window.external) !== "undefined") && 
(typeof (window.external.notify) !== "undefined")) 
{
window.external.notify(sURI);
}

In Conclusion

Even though the JavaScript is only capable of passing a string to the ScriptNotify event handler, it is highly recommended that you verify the string is in the expected format before trying to use it even if the string came from a source you included in the list of allowed URIs. 

Additional Resources

If you are interested in details on how to implement a Settings flyout, especially if you are using a WebView control, I have a previous article that might be of interest: Windows 8: Windows Store apps and the WebView control (we discussed how to display a Settings flyout and focused mostly around making the WebView control play nice with the flyout). 

If you are interested in RoamingSettings and the DataChanged event, the following article might also be of interest: Windows 8: Windows Store apps - RoamingSettings and the DataChanged event 

The following is a zipped copy of my project so far (C# and built using Visual Studio Express 2012 for Windows 8): https://github.com/downloads/dovicoapi/DOVICOTimerForWindowsStore/DOVICOTimerForWindowsStore.zip 

Note: This project is still a work in progress so it may not comply with all of the Windows Store restrictions yet. I will be updating this project on github as it proceeds. 
app JavaScript Event Data (computing)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Quick Pattern-Matching Queries in PostgreSQL and YugabyteDB
  • Mind Map Reuse in Software Groups
  • 5 Factors When Selecting a Database
  • Utilize OpenAI API to Extract Information From PDF Files

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: