Hybrid WebView导航和导航事件Xamarin表单

问题描述：

我正在使用xamarin表单开发一个跨平台的应用程序。我创建了一个跨平台的PCL项目。我已经在其中实施了混合Web视图。正如我试图加载我的html内容。我只想知道如何捕捉混合webview的导航和导航事件。我对Xamarin和原生移动开发非常陌生。Hybrid 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的高度来适应屏幕大小？

答

我认为你需要使用一个stackLayout啊，你喜欢用保证金达到100％，屏幕尺寸任何布局，填充和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的功能是什么？

答

不知道你仍然需要帮助，但这里是答案的一部分：

为了“调试Xamarin网页视图”为Android您的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

Hybrid WebView导航和导航事件Xamarin表单

相关推荐