How to Use the WebView control in UWP to interact C # With JS,
Recently, due to project requirements, we need to use C # to interact with JS in UWP. Since we do not have any practical experience, we are now using Baidu on the Internet, however, Baidu's results show that most of the methods are on Android and IOS, with almost no UWP. Fortunately, Microsoft and his powerful MSDN community found a solution in it, so I shared it with you.
1. First, since we want to interact with JS, we must first have an HTML page. Here, I use a local HTML page as an HTML page (don't forget to include the JS part in it) and add it to the current UWP project ), the sample code is as follows:
1 <!DOCTYPE html> 2The above HTML page is very simple, that is, the current time is directly obtained and displayed;
2. Next, we need to layout the foreground in the current project. The layout is very simple. Here we will list the sample code directly:
1 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">2 <StackPanel>3 <WebView x:Name="MyWebview" Width="500" Height="500" Source="ms-appx-web:///HTMLPage1.html"/>4 <Button x:Name="MyButton" Margin="10" Content="Invoke the TimeUpdate Javascript function from C# using this button" Click="MyButton_Click_1" HorizontalAlignment="Center"/>5 </StackPanel>The WebView control is used to display a local HTML page. The Button control is used to interact with Javascript in HTML (in fact, this Button can also trigger JS events that get the current time and display in HTML)
3. Add the event corresponding to the Button and add the background code:
1 private async void MyButton_Click_1 (object sender, RoutedEventArgs e) 2 {3 await MyWebview. invokeScriptAsync ("TimeUpdate", null); // The first parameter is the JS function to be triggered, and the second parameter is the parameter 4 to be passed to the function}Through the above three steps, we can use this Button to get the current time and display it in WebView.
Well, I will write it here. In fact, this is just a very simple interaction method. To be more advanced, You need to explore it together!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
