Xamarin.Forms WebView Control in Windows Phone 8.1 App

MarcoSeraphinMarcoSeraphin DEMember, University
edited August 2014 in Xamarin.Forms

Hi,

I have developed a rather simple Forms App which has a Forms WebView control on a TabPage.
In the WebView control a mobile website (with jQuery behind I think) is displayed.

The Android and iOS version runs fine in the emulators.

Then I created a Windows Phone 8.1 Silverlight application with VisualStudio 2013 SP2 and added both my Forms PCL project and the necessary Xamarin.Forms NuGet Package for Windows Phone.

The app compiled and runs BUT the display of the mobile website is rather poor !!! No CSS seems to work neither the jQuery stuff.

Is this a problem of the Forms WebView implementation on Windows Phone ?
Do I make a mistake ?

I just provide the WebView control with the URL, that's it. I can do nothing more than rely on the WebView control rendering capabilities !?

I have added two screenshots, one of the iOS app and one of the WindowsPhone app displaying the same mobile web site page.
(I think even if the text is in german everyone can see the huge difference of the display result)

Any ideas ?

Best

Marco

Posts

  • CraigDunnCraigDunn USXamarin Team Xamurai

    What does the website look like when you visit it on the Windows Phone web browser? There has been a lot of discussion recently about [Microsoft fixing mobile website rendering in the latest WP Update(http://www.theverge.com/2014/7/31/5956163/windows-phone-8-1-update-internet-explorer-mobile-changes).

  • MarcoSeraphinMarcoSeraphin DEMember, University

    Hi Craig,

    thanx for your fast answer. I will check this evening. It was 10pm when I posted my question yesterday.
    I have read theverge article....sounds bad for Microsoft....I will come back with some test results.

    Thanx

    Marco

  • MarcoSeraphinMarcoSeraphin DEMember, University

    Hi Craig,

    ok, I have checked the mobile page with the Internet Explorer in the WindowsPhone emulator.
    mmhh.....it looks good, please check the screenshot. (one with IE with this mobile web site (http://m.gfu.net) and one with the Xamarin.Forms WebView)

    Is this a problem of the WebView control from Xamarin.Forms on the Windows Phone platform ???

    This would be bad. I think a custom renderer would not be a solution.

    Any ideas ?

    Regards

    Marco

  • CraigDunnCraigDunn USXamarin Team Xamurai

    I just checked the Windows Phone WebView docs and I wonder if it's related to script being turned off by default. Will look into it!

  • MarcoSeraphinMarcoSeraphin DEMember, University
    edited August 2014

    Yep, found this Xamarin doc page concerning WebView and JavaScript (see Source sample 3.):

    http://developer.xamarin.com/recipes/android/controls/webview/call_csharp_from_javascript/

    With the native WebView there is a WebView.Settings.JavaScriptEnabled = true; where JavaScript could be enabled.
    But NOT available using the Xamarin.Form WebView control...!?

    Marco

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Hey @MarcoSeraphin‌ yeah, I confirmed this is a bug (which we're aware of). We need to set IsScriptEnabled = true (and/or provide a way for this to be controlled via the Xamarin.Forms.WebView's API). Unfortunately I don't have a timeline for when the fix will land at the moment.

  • MarcoSeraphinMarcoSeraphin DEMember, University
    edited August 2014

    Hi Craig,

    thanks again for your answer and your sample. I wrote my first CustomRenderer and set the "IseScriptEnabled" property to true and it looks good now on Windows Phone. (first page is not, the property activates the JavaScript after the first page change as documented on the windows support page.)

    Here is the renderer:

    public class CustomWebViewRenderer : WebViewRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
            {
                base.OnElementChanged(e);
    
                if (e.OldElement == null)
                {
                    var webView = (WebBrowser) Control;
                    webView.IsScriptEnabled = true;
                }
            }
        }
    

    You just need to make the property available in the Xamarin.Forms WebView API.

    Best

    Marco

  • MarcoSeraphinMarcoSeraphin DEMember, University
    edited August 2014

    Hi Craig,

    now I am setting the Uri AFTER I set the IsScriptEnabled = true again and now also the starting page is displayed correctly with JavaScript enabled.

     if (e.OldElement == null)
                {
                    var webView = (WebBrowser) Control;
                    webView.IsScriptEnabled = true;
    
                    webView.Source = new Uri("http://m.gfu.net");
                }
    

    Marco

  • DirkWalkowiakDirkWalkowiak DEMember, University

    Hi Craig!

    I am also interested in the fix for the Xamarin.Forms.WebView to enable JavaScript. Do you know meanwhile when we can expect that fix to arrive?

    Setting WebBrowser.IsScriptEnabled in the OnElementChanged method of a custom renderer does not fix the problem in my case where websites get loaded using binding inside the view.

  • ElvinAsadovElvinAsadov AZMember ✭✭
    edited December 2014

    @MarcoSeraphin‌ , it is well done. You are really did big work. It will help to people which has this problem.
    Thanks...

    And do not forget to add
    [assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
    before namespace

  • MarcoSeraphinMarcoSeraphin DEMember, University

    Hi Elvin,

    thanx. Yes I forgot it in my post, but obviously I used it in my code.

    Marco

  • RussellFustinoRussellFustino USUniversity ✭✭

    Hi @CraigDunn‌ ! What would the sample code be for the iOS and Android renderers webview here? Hope all is well and Happy Holidays!

  • RussellFustinoRussellFustino USUniversity ✭✭
    edited December 2014

    I have the Android version working! As it turns out the Android WebView has scripting enabled already, or it is not an option. What does the UIWebView in iOS default to? isScriptable? Attached is the Android code renderer of the WP Phone version above. I am still working on the iOS version of a Webview Renderer. What are the namespaces I would need for that? I seem to be running into a run time error that I need to figure out yet. Also, I would be looking to put the YouTube Video in an embedded iFrame. Do you have any samples to point me to on this? Happy New Year!

                using System;
                using System.Collections.Generic;
                using System.Linq;
                using System.Text;
    
                using Android.App;
                using Android.Content;
                using Android.OS;
                using Android.Runtime;
                using Android.Views;
                using Android.Widget;
                using Android.Webkit;
                using Xamarin.Forms;
                using Xamarin.Forms.Platform.Android;
                using myRenderer;
                using myRenderer.Droid;
    
                [assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
                namespace myRenderer.Droid
                {
                    class MyWebViewRenderer :WebViewRenderer
                    {
                        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
                        {
                            base.OnElementChanged(e);
                            if (e.OldElement == null)
                            {
                                var webView = (Android.Webkit.WebView)Control;
                                webView.LoadUrl("Youre URL Here");
                            }
                        }
                    }
                }
    
  • HavihaviHavihavi USMember

    @MarcoSeraphin said:
    Hi Craig,

    thanks again for your answer and your sample. I wrote my first CustomRenderer and set the "IseScriptEnabled" property to true and it looks good now on Windows Phone. (first page is not, the property activates the JavaScript after the first page change as documented on the windows support page.)

    Here is the renderer:

    public class CustomWebViewRenderer : WebViewRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
            {
                base.OnElementChanged(e);
    
                if (e.OldElement == null)
                {
                    var webView = (WebBrowser) Control;
                    webView.IsScriptEnabled = true;
                }
            }
        }
    

    You just need to make the property available in the Xamarin.Forms WebView API.

    Best

    Marco

    Hi @MarcoSeraphin,

    Where you have written this code, I am using shared code (PCL), I could not found WebViewRenderer and WebBrowser.

    Could you please help me .

    Thanks inadvance

  • Marco_SeraphinMarco_Seraphin DEUniversity ✭✭

    Hi Havi,

    this is native Code, not possible in an PCL. You have to write a Custom Renderer for each platform.

    See here: https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/

    Marco

  • JohnTolleJohnTolle USMember ✭✭
    edited April 2017

    Just to resurrect this thread from the dead, after staring at this for a few minutes, I realize it only applies to Windows Phone 8.0, and not 8.1, which = RT, which uses WebView instead, which does have JavaScript enabled by default (and you can't disabled it, in fact.)

    On a related note, is there an easy way to debug JavaScript running in a WebView on Windows Phone/Desktop 8.1 and UWP? There's a lot of great info out there on how to do it with Android which has a sweet Chrome debugger situation going for. Not sure on iOS, but I'm hoping I eventually find something similar to the Android debugging action.

Sign In or Register to comment.