Silverlight WindowsPhone How to communicate with C code from WebBrowser javascript and vice versa beginners tutorials C XAML
Silverlight WindowsPhone How to communicate with C code from WebBrowser javascript and vice versa beginners tutorials C XAML
Introduction:
We can use WebBrowser control in silverlight windows phone(8.0 &8.1) for displaying html content, and so some times we may need to communicate windows phone native code (C#) from webbrowser html content.
For example, lets assume there is one html button in webbrowser content, and when clicking on html button we need to navigate to another windows phone native page. Which means we need to trigger windowsphone native program(i.e, C# code) from javascript function and then navigate to another page.
Also from this article we can learn how to call javascript function from windows phone C# code.
For example, lets assume there is one html button in webbrowser content, and when clicking on html button we need to navigate to another windows phone native page. Which means we need to trigger windowsphone native program(i.e, C# code) from javascript function and then navigate to another page.
Also from this article we can learn how to call javascript function from windows phone C# code.
Requirements:
- This sample is targeted for windows phone silverlight 8.0 OS,So make sure you�ve downloaded and installed the Windows Phone 8.0 SDK or later. For more information, see Get the SDK.
- I assumes that you�re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
- This post assumes you�re using Microsoft Visual Studio Express 2012 for Windows or Later.
Description:
Step 1:
1. Open Microsoft Visual Studio Express 2012 for Windows (or) later.
2. Create new windows phone silverlight project using the "Blank App" template available under Visual C# -> Store Apps -> Windows Phone Apps. (for example project name :WP8CsharpvsJavascript)
Step 2: And lets add below code in MainPage.xaml, which is having one WebView control is for displaying html content , and one Button is for loading html on Click event.
- <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
- <StackPanel x:Name="LayoutRoot" Background="LightBlue">
- <phone:WebBrowser x:Name="WebBrowserName" Height="400" IsScriptEnabled="True" Margin="5" />
- <Button x:Name="Button1" Content="Call javascript function from c#" Click="Button1_Click" />
- </StackPanel>
- </Grid>
Note: Dont forgot to set WebBrowser property to IsScriptEnabled="True", otherwise ScriptNotify event will not be fire forever :P
Step 3: Create Html page in project (Ex:LocalHTMLPage.html) and add your html content in it.
Step 3: Create Html page in project (Ex:LocalHTMLPage.html) and add your html content in it.
Example html content:
- <html >="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script type="text/javascript">
- function JavaScriptFunctionName() {
- alert("Calling from C# code.");
- //window.external.notify("SomeSpecificFunctionCall()");
- }
- </script>
- </head>
- <body>
- <h1 style="color:red;font-size:35px;">Communication BTW JavaScript & C# in windows phone silverlight app.</h1>
- <input id="Button1" type="button" style="width:100%;height:100px;font-size:50px;" value="Call C# function from Html Button" onclick="window.external.notify(CsharpFunctionNamelink download
