question

GordonS-9701 avatar image
0 Votes"
GordonS-9701 asked JarvanZhang-MSFT commented

Xamarin Forms allow Popups in WebView

I want to use a WebView to show content that is provided by a 3rd party via a call to their JavaScript. I get the message "You must allow popups for this to work" ... so how do I do that?

I have this in XAML:

         <WebView x:Name="WebView"
                  HeightRequest="1000"
                  Source="{Binding WebViewContent}"
                  WidthRequest="1000"  />

And this in ViewModel:
var localHtml = new HtmlWebViewSource();

                 localHtml.Html = @"<html>
                                        <body>
                                         <p>This is a test</p>
        
     < script src='https://url-to3rdparty-js.js\' ></ script >
     < script >
         ThirdParty.showUI('kd28kzjl2l', 'https://thirdparty/tpp-ui/');
     </ script >
                                         </body>
                                     </html>";
        
                 WebViewContent = localHtml;

With WebViewContent defined as:

 public WebViewSource WebViewContent
 {
     get => _webViewContent; 
     set => SetProperty(ref _webViewContent, value);
 }


dotnet-xamarin
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.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

I get the message "You must allow popups for this to work" ... so how do I do that?

It seems the webview loads javascript, try to set JavaScriptCanOpenWindowsAutomatically to true to tell JavaScript to open windows automatically. This applies to the JavaScript function window.open(), the default is false.

public class CustomWebViewRenderer : WebViewRenderer
{
    public CustomWebViewRenderer(Context context) : base(context)
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);

        Control.Settings.JavaScriptCanOpenWindowsAutomatically = true;
        Control.Settings.JavaScriptEnabled = true;
    }
}

Best Regards,

Jarvan Zhang


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.

How / where do I implement the code you posted? I tried adding it to my shared project but it didn't understand what "WebViewRenderer" is?

0 Votes 0 ·

You need to create a custom renderer for the webView in native project. For how to implement the cusotm rendere, please check this doc.

0 Votes 0 ·

I tried creating a custom WebViewRenderer in my Android project, I created a custom WebView in the shared project and used that in the XAML view ... but it now just throws an unhandled error :-(

I'll try searching Google for more specific help.

0 Votes 0 ·

If you are facing some issues while implementing, try to post the particular error with the corresponding codes here.

0 Votes 0 ·

May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

0 Votes 0 ·

Sorry for not responding, but the issue was fixed by using an alternative solution from the 3rd party which removed the "popup" issue.

I believe your solution, although it worked code-wise, didn't solve the problem (because it was an issue caused at the 3rd party end)

0 Votes 0 ·
Show more comments