Xamarin Forms - 使 webview 返回

Question

早上好，

我正在 Xamarin.Forms 中开发一个小的跨平台 webview 项目。我有 webview 工作，但我想添加一个工具栏，它有一个后退和前进按钮。

我尝试了许多不同的方法，但似乎都没有特别好的方法。我试图通过关注这个人的帖子Navigation Toolbar来实现这个功能

我将在下面附上我的代码，如果有人可以帮我解决这个问题或提供一个很棒的解决方案！

如果这个问题之前已经被其他用户回答过，那么我很抱歉。

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace DisplayWebPage
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new WebPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

WebPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;

using Xamarin.Forms;

namespace DisplayWebPage
{
    public class WebPage : ContentPage
    {
        public WebPage()
        {
            Content = new StackLayout
            {
                Children = {
                    new WebView
                    {
                        Source = "http://www.google.com"
                    }
                }
            };
        }
    }
}

期待得到答案，因为我已经坚持了很长一段时间了。

亲切的问候

Answer 1

像这样编辑您的代码。 首先将您的MainPage 包裹在NavigationPage 中以使工具栏可见。

基本上归结为创建一个变量，以便能够更轻松地访问您的WebView。

然后在ToolbarItems 集合中创建一个可以触发事件的按钮。在这种情况下，您可以在WebView 上调用已经可用的GoBack() 方法。

您可能想查看WebView 上的Xamarin documentation，最好检查一下您是否可以真正返回CanGoBack 属性。

请注意，我已经分配了BackIcon.png，您当然可以将其替换为null 或您自己的图标。 此外，代码还没有经过测试，这只是我的想法，所以可能缺少一些分号或其他东西。

App.cs

// ... other code

public App()
{
   // The root page of your application
   MainPage = new NavigationPage(new WebPage());
}
// ... other code

WebPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;

using Xamarin.Forms;

namespace DisplayWebPage
{
    public class WebPage : ContentPage
    {
        private WebView _webView;

        public WebPage()
        {
           // Assign a WebView to a global variable
            _webView = new WebView
                    {
                        Source = "http://www.google.com",
                        HeightRequest="1000",
                       WidthRequest="1000" 
                    };

            // Create toolbar items here
            ToolbarItems.Add(new ToolbarItem("Back", "BackIcon.png", () => { _webview.GoBack(); }));

            Content = new StackLayout
            {
                Children = { _webView}
            };
        }
    }
}

Answer 2

Gerald Versluis 的 answer 很棒。基于此，我想分享一下我尝试解决以下问题后我的代码的样子：

• 尝试在 XAML 中实现工具栏和 webview（使用 VS2017）
• 显示首页时隐藏工具栏（无需返回）
• 覆盖设备后退按钮

App.xaml.cs

// ... using, namespace etc

    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new MainPage());
        }
    }

// ...

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:MyApp"
             x:Class="MyApp.MainPage"
             NavigationPage.HasNavigationBar="False"
             Title="My App">

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Back" Clicked="OnBack"></ToolbarItem>
    </ContentPage.ToolbarItems>

    <WebView x:Name="browser" Navigating="OnNavigating"></WebView>
</ContentPage>

MainPage.xaml.cs

using System;
using Xamarin.Forms;

namespace MyApp
{
    public partial class MainPage : ContentPage
    {
        string Url;

        public MainPage()
        {
            InitializeComponent();
            browser.Source = Url = GetUrl();
        }

        void OnBack(object sender, EventArgs args)
        {
            browser.GoBack();
        }

        protected override bool OnBackButtonPressed()
        {
            if (browser.CanGoBack)
            {
                browser.GoBack();
                return true;
            }
            else return base.OnBackButtonPressed();
        }

        void OnNavigating(object sender, WebNavigatingEventArgs args)
        {
            // Checking if we are at the home page url
            // browser.CanGoBack does not seem to be working (not updating in time)
            NavigationPage.SetHasNavigationBar(this, args.Url != Url);
        }

        string GetUrl()
        {
            // Possibly some mechanism to accomoddate for several locales
            return "...";
        }
    }
}

Answer 3

尝试以下步骤： 在 WebView 对象中添加导航事件

 List<string> history = new List<string>();
 WebView myWebView = new WebView
 {
      Source = "http://www.google.com"
 };
myWebView.Navigated += WebViewPage_Navigated;
Children = myWebView;

然后定义如下函数：

public void WebViewPage_Navigated(object sender, WebNavigatedEventArgs e)
{
    WebNavigationResult result = e.Result;            
    if(result.Equals(WebNavigationResult.Success)){
        currentUrl = e.Url;
       history.Add(currentUrl);
    }            
}

现在您可以根据历史列表计数和当前元素绑定“前进”和“上一个”元素（如果移到后面，则添加到前进列表）。希望这会有所帮助。