在之前的文章中,我们介绍了Qt WebEngine注入js的用法,及runJavaScript()的用法,该方法主要是用在页面加载完成后,为了和网页做一些交互时使用。有时候需要监听网页加载完成的一些状态或信息,则需要网页加载前注入js来实现。这需要用到我们今天要介绍的内容WebEngineScript。
QWebEngineScript
QWebEngineScript支持在加载Web内容期间,在JavaScript引擎中的不同点(由InjectionPoint决定)编程注入所谓的用户脚本。
变量 | 值 | 描述 |
QWebEngineScript::DocumentCreation | 2 | 该脚本将在文档创建后立即执行。这不适用于任何 DOM 操作。 |
QWebEngineScript::DocumentReady | 1 | 一旦 DOM 准备就绪,脚本就会运行。这相当于DOMContentLoaded JavaScript 中的事件触发。 |
QWebEngineScript::Deferred | 0 | 该脚本将在页面加载完成时或文档准备就绪后 500 毫秒运行(以先到者为准)。 |
变量 | 值 | 描述 |
QWebEngineScript::MainWorld | 0 | 页面的 Web 内容所使用的环境。在某些情况下,它可以用于向 Web 内容公开自定义功能。 |
QWebEngineScript::ApplicationWorld | 1 | 用于用 JavaScript 实现的应用程序级功能的默认隔离世界。 |
QWebEngineScript::UserWorld | 2 | 如果应用程序未使用更多环境,则用户设置脚本使用的第一个隔离环境。根据经验,如果向应用程序用户公开该功能,则每个单独的脚本可能都应该有自己的隔离环境。 |
代码说明
QWebEngineScript script;script.setWorldId(QWebEngineScript::MainWorld);script.setInjectionPoint(QWebEngineScript::DocumentCreation);script.setRunsOnSubFrames(true);script.setSourceCode("alert(11111111111)");QWebEngineView *view = new QWebEngineView(this->centralWidget());view->page()->scripts().insert(script);view->resize(this->width(), this->height());view->setUrl(QUrl("https://www.baidu.com/"));
该代码在程序加载之前弹窗提示,由于弹窗是模态阻塞的,所以页面是还没显示的,点OK之后页面就正常显示了。
WebEngineScript
WebEngineScript是QML中的用法,和QWebEngineScript类似。实现代码如下
WebEngineView {id: webviewanchors.fill: parenturl: "https://www.bilibili.com/"Component.onCompleted: {console.log("onCompleted")var script = WebEngine.script()script.injectionPoint = WebEngineScript.DocumentCreationscript.worldId = WebEngineScript.MainWorldscript.sourceCode = "alert(222222222222)"webview.userScripts.insert(script)}}
在WebEngineView组件创建完成是注入js,因为我们要在页面加载完成之前注入,所以不用等到loading完成的时候注入。这个代码的效果和上面是一样的,也是页面加载完成之前弹窗提示。
应用
该用法主要用于拦截页面某些请求的时候使用,由于QWebEngineUrlRequestInterceptor拦截器只能获取到url,无法获取到请求头和body,所以只能通过js脚本进行拦截获取,使用页面加载前注入js的方式使得全局生效。不过后续的Qt版本也逐步在放开拦截的内容,Qt6.5QWebEngineUrlRequestInterceptor支持获取请求头,Qt6.7支持获取body,如果能够使用最新的Qt版本,那会方便很多。