question

GordonS-9701 avatar image
0 Votes"
GordonS-9701 asked Thamotharan-5143 commented

Xamarin Forms WebView and Javascript

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.

dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

GordonS-9701 avatar image
0 Votes"
GordonS-9701 answered

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>


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered Thamotharan-5143 commented

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.


· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Yes, I found out about the Debuging via Chrome yesterday. That will be useful!

Can you expand on the second part please ... where would that code go? I assume "HelloWebViewClient" is a custom WebView?
EDIT: I tried going to a normal website with the standard WebView and have noticed that nothing works (no links work, no scrolling, etc) so I must have done something weird - or not done something I need to regarding the WebView. I have another WebView which is working fine!?

0 Votes 0 ·

I assume "HelloWebViewClient" is a custom WebView?

Yes, it is a custom WebViewClient

: I tried going to a normal website with the standard WebView and have noticed that nothing works (no links work, no scrolling, etc)

You use a website( Does it work normally in the Android Chrome application?) and have noticed that nothing works, do you create custom renderer for webview to enable above settings?

0 Votes 0 ·

OK, so the problem of "no links work" etc when the WebView displays the page ... was caused by me having an unused CollectionView beneath the WebView, in the same Grid element!

I commented out the CollectionView (isn't needed now) and now the web page works, in a standard WebView!! There are now other issues, but that's hopefully something I can now sort out.

0 Votes 0 ·
Show more comments

Hi,

Where we need to do this

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));

I am getting error on web_view.

0 Votes 0 ·