Qt WebEngine基于WebEngineScript注入js脚本

在之前的文章中，我们介绍了Qt WebEngine注入js的用法，及runJavaScript()的用法，该方法主要是用在页面加载完成后，为了和网页做一些交互时使用。有时候需要监听网页加载完成的一些状态或信息，则需要网页加载前注入js来实现。这需要用到我们今天要介绍的内容WebEngineScript。

QWebEngineScript

QWebEngineScript支持在加载Web内容期间，在JavaScript引擎中的不同点（由InjectionPoint决定）编程注入所谓的用户脚本。

变量	值	描述
QWebEngineScript::DocumentCreation	2	该脚本将在文档创建后立即执行。这不适用于任何 DOM 操作。
QWebEngineScript::DocumentReady	1	一旦 DOM 准备就绪，脚本就会运行。这相当于DOMContentLoadedJavaScript 中的事件触发。
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版本，那会方便很多。