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: webview
        anchors.fill: parent
        url: "https://www.bilibili.com/"

        Component.onCompleted: {
            console.log("onCompleted")
            var script = WebEngine.script()
            script.injectionPoint = WebEngineScript.DocumentCreation
            script.worldId = WebEngineScript.MainWorld
            script.sourceCode = "alert(222222222222)"
            webview.userScripts.insert(script)
        }
    }

在WebEngineView组件创建完成是注入js，因为我们要在页面加载完成之前注入，所以不用等到loading完成的时候注入。这个代码的效果和上面是一样的，也是页面加载完成之前弹窗提示。

应用

该用法主要用于拦截页面某些请求的时候使用，由于QWebEngineUrlRequestInterceptor拦截器只能获取到url，无法获取到请求头和body，所以只能通过js脚本进行拦截获取，使用页面加载前注入js的方式使得全局生效。不过后续的Qt版本也逐步在放开拦截的内容，Qt6.5QWebEngineUrlRequestInterceptor支持获取请求头，Qt6.7支持获取body，如果能够使用最新的Qt版本，那会方便很多。