WebEngineView - 立即运行JavaScript（在执行页面脚本之前）

Posted 2023-02-16

【中文标题】WebEngineView - 立即运行JavaScript（在执行页面脚本之前）

【英文标题】：WebEngineView - runJavaScript immediately (before page scripts are executed)

【发布时间】：2021-03-05 11:12:36

【问题描述】：

我有一个使用 WebEngineView 的 QtQuick 浏览器。 我想在加载普通脚本之前执行一些JS代码，在window中设置一个变量，以便普通脚本在执行时可以拾取它。

我尝试过这样的事情：

WebEngineView 
        id: webview
        width: appContainer.width
        url: appContainer.pathUrl
        height: appContainer.height

        onLoadingChanged: 
            console.log('onLoadingChanged');
            webview.runjavascript("window.someVariable = true");
        
    

我可以多次看到“onLoadingChanged”日志，并且变量设置正确。但是，我正在启动一个非常简单的 Vue 应用程序，它带有一个简单的静态组件，我尝试检查其 mounted 回调中的变量：

mounted: function() 
    console.log(window.someVariable);
    setInterval(function()  console.log(window.someVariable); , 1000);

第一个控制台日志打印undefined，但每个下一个间隔滴答打印true。所以变量设置正确，但是在初始页面加载之后（甚至在DOMContentLoaded之后）

有没有办法在其他事情发生之前自动设置这个变量？

【参考方案1】：

我找到了答案：使用 userScripts 属性。我认为它是静态的，我需要有条件地注入脚本，但也可以这样做。

 WebEngineScript 
        id: scriptID
        name: "scriptName"
        injectionPoint: WebEngineScript.DocumentCreation
        sourceCode: "window.someVariable = true"
        worldId: WebEngineScript.MainWorld
    


WebEngineView 
        id: webview
        width: appContainer.width
        url: appContainer.pathUrl
        height: appContainer.height

        userScripts: [ scriptID ]
        // or conditionally, I actually wanted to check if Loader component is loaded
        userScripts: loaderObj.status == Loader.Ready ? [ scriptID ] : []