我正在尝试使用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
}
}
...
如果您对此有任何想法或经验，请帮助!
最佳答案
我也想使WebEngineView轻弹。我决定，最好使用Flickable进行操作。但是天真地做类似的事情:
...
Flickable {
WebEngineView {...}
}
...
不管用。
进一步的调查使我想到了Qt based Web browser for embedded touch devices。我已经在PC上尝试过了。看起来它确实可以满足我的要求，但是它太复杂了，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％加载状态的要求。
UPD 3:可轻弹的WebEngiveView的更完整版本。使用用户脚本而不是直接调用JavaScript，因为我遇到了一些奇怪的错误，导致WebEngineView关闭。
// Copyright 2019 Utility Tool Kit Open Source Contributors
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy
// of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.
//
// Author: Innokentiy Alaytsev <[email protected]>
//
// File name: qml/Utk/Qml/FlickableWebEngineView.qml
//
// Description: The QML FlickableWebEngineView QtQuick 2 component.
import QtQuick 2.7
import QtWebEngine 1.3
Item {
property alias flickable: flickable;
property alias webView: webView;
property bool userDragImgEnabled: true;
property bool userSelectEnabled: true;
readonly property string kDisableUserDragCssId:
"utk_qml_flickable_web_engine_view_disable_user_drag_css";
readonly property string kDisableUserSelectCssId:
"utk_qml_flickable_web_engine_view_disable_user_select_css";
readonly property string kDisableUserDragCss:
"{ \\ \
-webkit-user-drag: none; \\ \
-khtml-user-drag: none; \\ \
-moz-user-drag: none; \\ \
-ms-user-drag: none; \\ \
user-drag: none; \\ \
}";
readonly property string kDisableUserSelectCss:
"{ \\ \
-webkit-touch-callout: none; \\ \
-webkit-user-select: none; \\ \
-khtml-user-select: none; \\ \
-moz-user-select: none; \\ \
-ms-user-select: none; \\ \
user-select: none; \\ \
}";
WebEngineScript {
id: disableUserDragScript;
name: kDisableUserDragCssId;
injectionPoint: WebEngineScript.DocumentReady;
sourceCode: applyCssJavaScript ("img", kDisableUserDragCss, kDisableUserDragCssId);
worldId: WebEngineScript.MainWorld;
}
WebEngineScript {
id: disableUserSelectScript;
name: kDisableUserSelectCssId;
injectionPoint: WebEngineScript.DocumentReady;
sourceCode: applyCssJavaScript ("body", kDisableUserSelectCss, kDisableUserSelectCssId);
worldId: WebEngineScript.MainWorld;
}
Flickable {
id: flickable;
anchors.fill : parent;
clip: true;
WebEngineView {
id: webView;
anchors.fill : parent;
scale: 1;
onLoadingChanged: {
if (loadRequest.status !== WebEngineView.LoadSucceededStatus) {
return;
}
flickable.contentHeight = 0;
flickable.contentWidth = flickable.width;
runJavaScript (
"document.documentElement.scrollHeight;",
function (actualPageHeight) {
flickable.contentHeight = Math.max (
actualPageHeight, flickable.height);
});
runJavaScript (
"document.documentElement.scrollWidth;",
function (actualPageWidth) {
flickable.contentWidth = Math.max (
actualPageWidth, flickable.width);
});
}
}
}
onUserDragImgEnabledChanged: {
if (userDragImgEnabled &&
(webView.loadRequest.status === WebEngineView.LoadSucceededStatus)) {
runJavaScript (revertCssJavaScript (kDisableUserDragCssId));
}
else {
webView.userScripts = currentUserScripts ();
}
}
onUserSelectEnabledChanged: {
if (userSelectEnabled &&
(webView.loadRequest.status === WebEngineView.LoadSucceededStatus)) {
runJavaScript (revertCssJavaScript (kDisableUserSelectCssId));
}
else {
webView.userScripts = currentUserScripts ();
}
}
function currentUserScripts () {
var userScriptsToSkip = [
disableUserDragScript.name,
disableUserSelectScript.name
];
var updatedUserScripts = [];
for (var i in webView.userScripts) {
var script = webView.userScripts[ i ];
if (-1 == userScriptsToSkip.indexOf (script.name)) {
updatedUserScripts.push (script);
}
}
if (!userDragImgEnabled) {
updatedUserScripts.push (disableUserDragScript);
}
if (!userSelectEnabled) {
updatedUserScripts.push (disableUserSelectScript);
}
return updatedUserScripts;
}
function applyCssJavaScript (selector, css, cssId) {
var applyCssJavaScript =
"(function () { \
cssElement = document.createElement ('style'); \
\
head = document.head || \
document.getElementsByTagName ('head')[ 0 ]; \
\
head.appendChild (cssElement); \
\
cssElement.type = 'text/css'; \
cssElement.id = '%1'; \
\
if (cssElement.styleSheet) \
{ \
cssElement.styleSheet.cssText = '%2 %3'; \
} \
else \
{ \
cssElement.appendChild ( \
document.createTextNode ('%2 %3')); \
} \
})();";
return applyCssJavaScript
.arg (cssId)
.arg (selector)
.arg (css);
}
function revertCssJavaScript (cssId) {
var revertCssJavaScript =
"(function () { \
var element = document.getElementById('%1'); \
\
if (element) { \
element.outerHTML = ''; \
\
delete element; \
} \
})()";
return revertCssJavaScript.arg (cssId);
}
}