Question

我正在尝试使用QML和WebEngineView组件为Ubuntu 14.04创建一个简单的桌面Web浏览器。该应用程序将在具有触摸板的设备上工作，因此最好使WebEngineView内部显示的内容可以轻松。

我尝试这样做，但它不起作用：

...    
        WebEngineView {
            id: webView
            url: "http://google.com"
            width: parent.width
            height: winternet.height-navigationBar.height-iStatusBar.height-iBackButton.height
            anchors.top: navigationBar.bottom

            MouseArea {
                anchors.fill: parent
                drag.target: parent.data
            }

            onLinkHovered: {
                webView.url = hoveredUrl
            }
       }
...

如果您有任何想法或经验，请提供帮助！

Answer 1

我想让WebEngineView也可以轻弹。我决定，最好使用Flickable来做。但天真的做法是：

...
Flickable {
    WebEngineView {...}
}
...

无效。

进一步的调查使我Qt based Web browser for embedded touch devices。我已经在我的电脑上试过了。看起来它正在做我想要的，但它太复杂了，GPL许可证使它对任何用途都没用。

经过一些实验后，我发现如果Flickable.contentHeight和Flickable.contentWidth至少与WebEngineView显示的网页的实际大小相匹配，则会轻弹。 Flickable的这些属性可能具有比实际页面大小更大的值。在这种情况下，您将能够轻松浏览页面内容。如果Flickable.contentHeight和/或Flickable.contentWidth小于页面大小，您仍然可以轻弹。无论你是否想要这种方式，都由你来决定。）

因此，最终获得显示的实际页面大小并将其设置为Flickable.contentHeight和Flickable.contentWidth。我在这里给你一个简短的故事：没有办法用WebEngineView API获得所需的值（或者至少我没有在Qt 5.7 / 5.8文档中找到任何东西）。但我偶然发现了this answer on SO。使用这个答案我已经设法使一切工作：

...
Item {
    Layout.fillHeight: true
    Layout.fillWidth: true

    Flickable {
        id: flick
        anchors.fill: parent

        WebEngineView {
            anchors.fill: parent
            id: webView
        }
    }

    webView.onLoadingChanged: {
        if (webView.loadProgress == 100) {
            webView.runJavaScript(
                "document.documentElement.scrollHeight;",
                function (i_actualPageHeight) {
                    flick.contentHeight = Math.max (
                        i_actualPageHeight, flick.height);
                })
            webView.runJavaScript(
                "document.documentElement.scrollWidth;",
                function (i_actualPageWidth) {
                    flick.contentWidth = Math.max (
                        i_actualPageWidth, flick.width);
                })
        }
    }
}
...

上面提到的代码可能需要一些调整，但它几乎是我所拥有的代码的副本。

UPD 1：我发现这不是最终解决方案，因为在加载新页面之后由于某种原因，document.documentElement.scrollWidth可能无法重置并保持与上一页相同。

UPD 2：我已经解决了上述问题，但解决方案有点难看：将WebEngineView.onLoadingChanged中的Flickable.contentWidth重置为Flickable.width。将Flickable.contentWidth设置为0将导致加载后内容的高度不合适。

我做的另一项调整是取消了100％加载状态的要求。

QML WebEngineView轻弹内容

1 个答案: