我希望能让WebEngineView也可以滑动,于是决定使用Flickable。但是,直接尝试这样做是不可取的:
...
Flickable {
WebEngineView {...}
}
...
无法工作。
进一步调查引导我到基于Qt的嵌入式触摸设备Web浏览器。我已经在我的PC上试用过了。它似乎正好做我想要的事情,但它太复杂了,而GPL许可证使其对任何类型的使用都无用。
经过一些实验,我发现如果Flickable.contentHeight和Flickable.contentWidth至少与WebEngineView显示的实际网页大小相匹配,则可以使用滑动。 Flickable的这些属性可能具有比实际页面大小更大的值。在这种情况下,您将能够超出页面内容进行滑动。如果Flickable.contentHeight和/或Flickable.contentWidth小于页面大小,则仍然可以滑动。这取决于您是否希望以这种方式进行操作。
因此,最终获取实际页面大小并将其设置为Flickable.contentHeight和Flickable.contentWidth。我在这里给你讲一个简短的故事:使用WebEngineView API无法获取所需值(或者至少我在Qt 5.7/5.8文档中没有找到任何内容)。但是我偶然发现了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:更完整的 flickable WebEngiveView 版本。使用用户脚本而不是直接调用 JavaScript,因为我遇到了一些奇怪的错误,导致 WebEngineView 关闭。
import QtQuick 2.7
import QtWebEngine 1.3
Item ";
readonly property string kDisableUserSelectCss:
"";
WebEngineScript
WebEngineScript
Flickable
flickable.contentHeight = 0;
flickable.contentWidth = flickable.width;
runJavaScript (
"document.documentElement.scrollHeight;",
function (actualPageHeight) );
runJavaScript (
"document.documentElement.scrollWidth;",
function (actualPageWidth) );
}
}
}
onUserDragImgEnabledChanged:
else
}
onUserSelectEnabledChanged:
else
}
function currentUserScripts ()
}
if (!userDragImgEnabled)
if (!userSelectEnabled)
return updatedUserScripts;
}
function applyCssJavaScript (selector, css, cssId) \
else \
\
})();";
return applyCssJavaScript
.arg (cssId)
.arg (selector)
.arg (css);
}
function revertCssJavaScript (cssId) \
})()";
return revertCssJavaScript.arg (cssId);
}
}