Hybrid WebView 导航和导航事件 Xamarin Form

Posted 2023-02-23

【中文标题】Hybrid WebView 导航和导航事件 Xamarin Form

【英文标题】：Hybrid WebView Navigating and navigated event Xamarin Form

【发布时间】：2016-11-24 07:30:06

【问题描述】：

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

我想在所有平台 android、ios、UWP、WinPhone 的混合 Web 视图中获取 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 页面忽略了 height:100% 属性。如何设置混合 webview 的高度以适应屏幕尺寸？

【参考方案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它的什么功能？

【参考方案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