Xamarin Forms WebView and Javascript

Gordon S 496 Reputation points
2021-07-08T15:25:45.03+00:00

I want to use a WebView to load content from a 3rd party and it requires JQuery to allow it to function fully.

I am creating the WebView content like this: 

            var htmlSource = new HtmlWebViewSource();  
            htmlSource.Html = @"<html><body>  
                              <h1>Xamarin.Forms</h1>  
                              <p>Welcome to WebView.</p>"  
  
                              + $"<form action=\"myUrl\" class=\"paymentWidgets\" data-brands=\"VISA MASTER\"></form>" +  
                              $"<script src=\"https://code.jquery.com/jquery.js\" type=\"text/javascript\"></script>" +  
                              $"<script src=\"https://thirdparty.com/v1/paymentWidgets.js?checkoutId={resp.CheckoutId}\"></script>" +  
  
                              "</body></html>";  
  
            WebViewContent = htmlSource;

WebViewContent is bound to WebView Source.

The content from the 3rd party is displaying OK, but it is not functioning and I am assuming that is because JQuery has not loaded.

So, question 1 is - can I see any errors with WebView like you can with the Developer screens in Chrome, etc?

Question 2 - should JQuery load and run, or do I need to do something to enable it?

Note: I do not want to run a specific JavaScript function, I want JQuery to be active. The 3rd party code makes use of JQuery and will not function without it.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,922 questions
Accepted answer
  1. Gordon S 496 Reputation points
    2021-07-09T09:29:19.457+00:00

    The problem with the WebView content not responding to any clicks, scrolls, etc appears to have been caused by an unused CollectionView in the source.

    I had this 

            <Grid Margin="0"
              Padding="{StaticResource SpacingDefaultTop}"
              BackgroundColor="{StaticResource SecondaryColor}"
              IsVisible="{Binding TrustPayFrameVisible}">
            <WebView x:Name="PaymentWebView"
                     Scale="1"
                     Source="{Binding WebViewContent}" />

            <CollectionView x:Name="ItemsCollectionView" ItemsSource="{Binding Items}">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="api:UserCard">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="6*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Label Grid.Column="0"
                                   FontSize="{StaticResource Body1FontSize}"
                                   LineBreakMode="TailTruncation"
                                   Text="{Binding CardType}" />
                            <Label Grid.Column="1"
                                   FontSize="{StaticResource Body1FontSize}"
                                   LineBreakMode="TailTruncation"
                                   Text="{Binding CardLastFourDigits}" />
                            <Label Grid.Column="2"
                                   FontAttributes="Bold"
                                   FontSize="{StaticResource Body1FontSize}"
                                   HorizontalTextAlignment="End">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <Span Text="{Binding ExpiryMonth}" />
                                        <Span Text="/" />
                                        <Span Text="{Binding ExpiryYear}" />
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

            </CollectionView>

        </Grid>

    The CollectionView is no longer required, but I just hadn't removed it. When I did, the standard WebView then worked correctly. 

            <Grid Margin="0"
              Padding="{StaticResource SpacingDefaultTop}"
              BackgroundColor="{StaticResource SecondaryColor}"
              IsVisible="{Binding TrustPayFrameVisible}">
             <WebView x:Name="PaymentWebView"
                     Scale="1"
                     Source="{Binding WebViewContent}" />
        </Grid>

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor
    2021-07-09T07:28:17.907+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    So, question 1 is - can I see any errors with WebView like you can with the Developer screens in Chrome, etc?

    Google provides the webview component debugging tool devtools. Through devtools, you can directly debug the html content on the app on the chrome of the pc, provided that the debug mode must be turned on for the webview.

    You should open the WebView.SetWebContentsDebuggingEnabled(true);

    Question 2 - should JQuery load and run, or do I need to do something to enable it?

    If you JQurey normally, I will enable following settings. But lots of issues will cause JQuery not work. We should debug it, find the root cause. 

       web_view.Settings.JavaScriptEnabled = true;  
               web_view.Settings.DomStorageEnabled = true;  
               web_view.Settings.AllowFileAccessFromFileURLs = true;  
               web_view.Settings.JavaScriptCanOpenWindowsAutomatically = true;  
                web_view.SetWebViewClient(new HelloWebViewClient(this));

    Best Regards,

    Leon Lu

    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.