Question

我正在使用xamarin表单在c＃中开发跨平台应用程序。我创建了一个跨平台的PCL项目。我已经在其中实现了混合Web视图。因为我正在尝试加载我的html内容。我只是想知道如何捕获混合webview的导航和导航事件。我是Xamarin和原生移动开发的新手。

我想在所有平台Android，iOS，UWP，WinPhone的混合网页视图中获取OnNavigating和OnNavigated事件。

MainPage.xaml中

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Demo;assembly=Demo"
             x:Class="Demo.MainPage"
             Title="Dashboard">
  <ContentPage.Content>
    <local:HybridWebView x:Name="hybridWebView"  Uri="local.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
  </ContentPage.Content>
</ContentPage>

MainPage.xaml.cs中

public UserDashboard()
        {
            InitializeComponent(); 
        }

适用于Android的HybridwebViewRendered.cs

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace FISE.Droid
{
    public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
    {
        const string JavaScriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

        protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
        {
            base.OnElementChanged(e);
            Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);

            if (Control == null)
            {
                var webView = new Android.Webkit.WebView(Forms.Context);
                webView.Settings.JavaScriptEnabled = true;
                webView.Settings.DomStorageEnabled = true;
                Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);
                webView.SetWebChromeClient(new WebChromeClient());
                webView.SetWebViewClient(new WebViewClient());
                SetNativeControl(webView);
            }
            if (e.OldElement != null)
            {
                Control.RemoveJavascriptInterface("jsBridge");
                var hybridWebView = e.OldElement as HybridWebView;
                hybridWebView.Cleanup();
            }
            if (e.NewElement != null)
            {
                Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
                Control.LoadUrl(string.Format("file:///android_asset/Content/{0}", Element.Uri));
                InjectJS(JavaScriptFunction);
            }
        }

        void InjectJS(string script)
        {
            if (Control != null)
            {
                Control.LoadUrl(string.Format("javascript: {0}", script));
            }
        }

    }
}

我无法在混合webview中调试我的Html页面。我该怎么做？我的混合webview的高度未设置为100％。 Web视图中的html页面忽略了高度：100％属性。如何设置混合webview的高度以适应屏幕尺寸？

Answer 1

我认为您需要使用stackLayout o任何您希望达到100％屏幕尺寸的布局，并将Margin，Padding和Spacion设置为0。

  <ContentPage.Content>
     <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0" Padding="0" Spacing="0">
        <local:HybridWebView x:Name="hybridWebView"  Uri="local.html"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
     </StackLayout>
 </ContentPage.Content>

我很抱歉，但我认为你无法调试Html，原因是Html它不是一种可以像C＃一样调试的编程语言。你想要调试Html的功能是什么？

Answer 2

不确定你是否还需要帮助，但这是答案的一部分：

要在Android上“调试Xamarin Webview”，您可以在PC上运行模拟器，然后将ADB连接的USB连接到真实设备，然后运行Chrome并按照此处的说明操作：

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

对于IOS 11+，你需要获得最新的Safari Mac位（Safari技术预览版），我认为这里的设置有一些线索： http://asciiwwdc.com/2016/sessions/420

混合WebView导航和导航事件Xamarin表单

2 个答案: