如何使CefSharp WinForms控制滚动页面到链接

Question

所以这是在WinForms应用程序中使用CefSharp的场景.我们在页面中有两个信息页面URL和一个链接URL.我们想要加载页面 - 轻松完成,并让CefSharp显示链接所在页面的区域.也就是说,cefsharp会自动滚动到该链接在DOM中的页面上的正确位置.

最简单的方法是什么？

Answer 1

不确定您使用的是哪个版本,我能够使用最新稳定版本的CefSharp(47.0.0)来解决这个问题.

首先为FrameLoadEnd事件添加一个处理程序:

browser.FrameLoadEnd += OnBrowserFrameLoadEnd;

处理程序如下:

private void OnBrowserFrameLoadEnd(object sender, FrameLoadEndEventArgs frameLoadEndEventArgs)
{
    if (frameLoadEndEventArgs.Frame.IsMain && frameLoadEndEventArgs.Url == pageUrl)
    {
        frameLoadEndEventArgs.Browser.MainFrame.ExecuteJavaScriptAsync(
            "(function() { var el = document.querySelector('a[href=\"" + linkUrl +
            "\"]'); if(el) { el.scrollIntoView(); } })();");
    }
}

这两个常数是:

private const string pageUrl = "http://stackoverflow.com/";
private const string linkUrl = "http://stackexchange.com/legal";

每当我们导航到该网站时pageUrl,我们都会在加载的文档中调用JavaScript函数.它选择具有href等于linkUrlusing 的属性的第一个元素querySelector.如果有这样的元素,那么我们scrollIntoView()就在它上面调用方法.

当您访问stackoverflow.com时,此特定示例将以下链接滚动到视图中.

我使用CefSharp Minimal Example作为构建我的POC的起点.我在这里上传了它以供检查.

重建项目,启用包恢复,因此它应该获得所有必需的包.之后你可以运行它.将stackoverflow.com输入地址栏,按Enter键,加载后,视图应向下滚动.