Xamarin形式：Android和Windows平台上的HTML数据转换

Posted 2021-04-28

我正在使用自定义Web视图在ios应用程序上转换HTML数据。我正在android和Windows上寻找相同的自定义渲染器。

MyWebView.cs

public  class MyWebView : WebView
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(
    propertyName: "Url",
    returnType: typeof(string),
    declaringType: typeof(MyWebView),
    defaultValue: default(string));

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }
}

iOS上的MyWebViewRenderer.cs

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]

namespace MyApp.ios.Renderer
{
    public class MyWebViewRenderer : ViewRenderer<MyWebView, WKWebView>
    {
        WKWebView _wkWebView;

        protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();
                _wkWebView = new WKWebView(Frame, config);
                _wkWebView.NavigationDelegate = new MyNavigationDelegate();
                SetNativeControl(_wkWebView);
            }
        }

        public class MyNavigationDelegate : WKNavigationDelegate
        {
            public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
            {
                string fontSize = "";
                if (Device.Idiom == TargetIdiom.Phone)
                {
                    fontSize = "250%";
                }
                else if (Device.Idiom == TargetIdiom.Tablet)
                {
                    fontSize = "375%";
                }

                string stringsss = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", fontSize);
                WKjavascriptEvaluationResult handler = (NSObject result, NSError err) =>
                {
                    if (err != null)
                    {
                        System.Console.WriteLine(err);
                    }
                    if (result != null)
                    {
                        System.Console.WriteLine(result);
                    }
                };
                webView.EvaluateJavaScript(stringsss, handler);
            }

        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == "Url")
            {
                Control.LoadhtmlString(Element.Url, null);
            }
        }
    }
}

XAML和XAML.cs

<local:MyWebView
  x:Name="web_view"

web_view.Url = "htmldata";

在ios设备上输出屏幕截图：

添加示例HTML数据 here。我在android和Windows平台上需要相同的输出，因此要求为android和Windows平台自定义渲染代码。

答案

如果要显示在代码中动态定义的HTML字符串，则需要创建HtmlWebViewSource的实例：

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"copy the html string here";
web_view.Source = htmlSource;