Question

我正在制作一个包含WebView的UWP应用程序，我想实现一个简单的“滚动到顶部”按钮，我已经在这个按钮后面制作了代码并且它可以工作：

        private async void ToTopButton_Click(object sender, RoutedEventArgs e)
        {
        var ScrollToTopString = @"var int = setInterval(function() { 
        window.scrollBy(0, -36);

        if( window.pageYOffset === 0 )
            clearInterval(int);
        }, 0.1);";
        await MyWebView.InvokeScriptAsync("eval", new string[] { ScrollToTopString });
        }

但是现在我想只显示按钮，如果用户需要它，所以如果WebView滚动在顶部，按钮应该被隐藏，反之亦然......我已经研究，我没有找到任何东西。有人可以帮我吗？感谢

Answer 1

我想只显示用户需要的按钮，所以如果WebView滚动位于顶部，则按钮应隐藏，反之亦然。

应用程序无法直接访问WebView的滚动条，因为它是嵌入式Edge浏览器视图的一部分。因此，您可能需要使用脚本来监视onscroll event的滚动操作，并通过InvokeScriptAsync调用脚本。

然后，如果滚动条位于顶部，您可能需要通知您的uwp应用程序。为此，您可能需要使用Webview ScriptNotify事件。当页面调用window.external.notify并传递字符串参数时，托管的HTML页面可以在Windows应用商店应用中触发ScriptNotify事件。

但要注意<Button x:Name="ToTopButton" Content="to top" Click="ToTopButton_Click"></Button> <WebView x:Name="MyWebView" Height="500" Width="400" Source="https://www.microsoft.com/en-sg/" ScriptNotify="MyWebView_ScriptNotify" NavigationCompleted="MyWebView_NavigationCompleted"></WebView>：

的注释

要防止恶意脚本利用此事件，请确保仅为受信任的URI启用它。

您必须在应用清单的ApplicationContentUriRules部分中包含该页面的URI。（您可以在Package.appxmanifest设计器的“内容URI”选项卡上的Visual Studio中执行此操作。）此列表中的URI必须使用HTTPS并且可能包含子域通配符（例如，“ScriptNotify”），但它们可以不包含域通配符（例如，“https://.microsoft.com”和“https：//。”）。

以下是完整的样本：

private async void ToTopButton_Click(object sender, RoutedEventArgs e)
{
    var ScrollToTopString = @"var int = setInterval(function(){window.scrollBy(0, -36); if( window.pageYOffset === 0 ) clearInterval(int); }, 0.1);";
    await MyWebView.InvokeScriptAsync("eval", new string[] { ScrollToTopString });
}

private void MyWebView_ScriptNotify(object sender, NotifyEventArgs e)
{      
    var result = e.Value;
    if (result == "true")
    {
        ToTopButton.Visibility = Visibility.Collapsed;
    }
    else
    {
        ToTopButton.Visibility = Visibility.Visible;
    }
} 

private async void MyWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    string addlistener = @"window.onscroll = function() {myFunction()};
                          function myFunction()
                          {if( window.pageYOffset === 0 )  window.external.notify('true'); else window.external.notify('false');} "; 
    await MyWebView.InvokeScriptAsync("eval", new string[] { addlistener });
    //first time check
    var firstnotify = "if( window.pageYOffset === 0 )  window.external.notify('true'); else window.external.notify('false')";
    await MyWebView.InvokeScriptAsync("eval", new string[] { firstnotify });
}

背后的代码

(?#...)

频繁通知可能会影响性能，因此除非您必须使用此功能，否则不建议这样做。

隐藏/显示基于WebView滚动的“滚动到顶部”按钮

1 个答案: