Xamarin Forms - 让 webview 返回

Question

大家早上好，

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

我尝试了多种不同的方法，但似乎没有什么效果特别好。我试图通过关注这些人 post 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

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

 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);
    }            
}

现在您可以根据历史列表计数和当前元素绑定 'Forward' 和 'Prev' 元素（如果移到后面，则添加到前向列表）。希望这有帮助。

Answer 2

像这样编辑您的代码。首先将 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 3

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

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

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 "...";
        }
    }
}

Xamarin Forms - 让 webview 返回

Xamarin Forms - making webview go back

c#

android

webview

ios

xamarin.forms