Question

我正在建立一个类似框架的框架，该框架在后端使用python，在前端使用html / css / js。我的问题是在QWebEngineView加载期间出现的。

我在网上搜索如何使用QWebEngineView在python和javascript之间建立通信，最后我尝试使用QtWebChannel。因此，我进行了所有设置，并且一切都与python和javascript之间的通信正常工作，但是出现了下一个问题：

首先：我无法直接在HTML中使用标签<script>加载javascript文件
第二个：javascript随机加载，我尝试使用my_view.page().runJavascript(my_js)从python加载javascript，但尝试两个都可以。因此有时jQuery会在最后加载，因此代码的其他部分无法正常工作。

base.html：

<!DOCTYPE html>
<html lang="en">
    <p id="log"></p>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script>
        window.onerror = function (error, url, line) {
            console.error("ERROR: " + error.toString());
            console.error("LINE: " + line.toString());
         };
        function load_app(){
            new QWebChannel(qt.webChannelTransport, function (channel) {
                window.app = channel.objects.app;
                app.load_javascript(function(ret){
                    console.error("load javascript: " + ret)
                });
            });
         }
        load_app();
        console.error("app loaded")
    </script>
    {{ application_html_content | safe }}
</html>

HTML的另一部分：

{% extends 'base.html' %}

{% block content %}
    <div class="row">
        {% for user_id, user in user_dict.items() %}
            <div id="{{ user_id }}" class="col s12 m6">
                <div class="card blue-grey darken-1">
                    <div class="card-content white-text">
                        <span class="card-title">Visit Card</span>
                        <p>{{ user.name }}</p>
                    </div>
                    <div class="card-action">
                        <button id="btn_del_{{ user_id }}" class="btn blue waves-effect waves-light" onclick="delete_user({{ user_id }})">Delete</button>
                        <button class="btn blue waves-effect waves-light" onclick="detail_user({{ user_id }})">Detail</button>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

{% block javascript %}
    <script>
        $(document).ready(function() {
           app.request_result.connect(function (result) {
                if ("delete" in result) {
                    user_id = result.delete;
                    var element = document.getElementById(user_id);
                    element.parentNode.removeChild(element)
                }
            });
            console.error("ready");
        });

        function delete_user(user_id) {
            document.getElementById("btn_del_" + user_id).innerHTML = "Waiting ...";
            app.request('DemoHtml:Default:delete', user_id);
        }
        function detail_user(user_id) {
            app.path('detail_user', {"user_id": user_id});
        }
    </script>
{% endblock %}

load_javascript函数：

JQUERY = "vendor/Resources/js/jquery.js"
MATERIALIZE = "vendor/Resources/css/materialize/js/materialize.js"

@pyqtSlot(result=str)
def load_javascript(self):
    with open(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.MATERIALIZE), "r") as m_stream:
        materialize_content = m_stream.read()
    with open(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.JQUERY), "r") as j_stream:
        jquery_content = j_stream.read()
    self.template_view.view.page().runJavaScript(jquery_content)
    self.template_view.view.page().runJavaScript(materialize_content)
    return "ok"

如您所见，通常我必须在日志错误中看到

首先：“加载javascript：确定”
第二：“应用已加载”

但是一次一两次，这是相反的：

js：应用已加载
js：错误：未捕获的ReferenceError：$未定义
js：LINE：67
js：未捕获的ReferenceError：未定义$
js：加载javascript：确定

对此有任何帮助吗？

先谢谢您！

Answer 1

我解决了我的问题，感谢@ekhumoro试图帮助我，我在此线程上找到了答案：

如何等待另一个JS加载以继续操作？：https://stackoverflow.com/a/8618519/8293533

因此，要使其正常运行，我将JavaScript更改为此：我将此文件命名为app.js

function set_app() {
    try{
        new QWebChannel(qt.webChannelTransport, function (channel) {
            window.app_channel = channel.objects.app;
        });
    } catch (e) {
        console.error("setting_app error: " + e)
    }
}

set_app();

function request(route, args) {
    let interval = 10;
    window.setTimeout(function () {
        if (window["app_channel"]) {
            app_channel.request(route, args)
        } else {
            try {
                set_app();
            }
            catch(error) {
                console.error("app load error: " + error)
            }
            window.setTimeout(arguments.callee, interval);
        }
    }, interval)
}

function path(route, args) {
    let interval = 10;
    window.setTimeout(function () {
        if (window["app_channel"]) {
            app_channel.path(route, args)
        } else {
            try {
                set_app();
            }
            catch(error) {
                console.error("app load error: " + error)
            }
            window.setTimeout(arguments.callee, interval);
        }
    }, interval)
}

function request_result(callback) {
    let interval = 10;
    window.setTimeout(function () {
        if (window["app_channel"]) {
            app_channel.request_result.connect(callback)
        } else {
            try {
                set_app();
            }
            catch(error) {
                console.error("app load error: " + error)
            }
            window.setTimeout(arguments.callee, interval);
        }
    }, interval)
}

我在python中擦除了代码load_javascript，因为我找到了使用<script>标签和qrc:///路径调用js的方法。

现在我的html头看起来像这样：

<!DOCTYPE html>
<html lang="en">
    <p id="log"></p>
    <script src="qrc:///qwebchannel.js"></script>
    <script src="qrc:///app.js"></script>
    <script src="qrc:///jquery.js"></script>
    {{ application_html_content | safe }}
    <script src="qrc:///materialize.min.js"></script>
</html>

要使用qrc:///xxx.js，我使用了QResource和.qrc，.rcc个文件。这是我的代码示例，适合那些想要的人：

class ApplicationContainer:

    SRC_QRC_PATH = "src/*Bundle/Resources/qrc/*.qrc"
    SRC_RCC_PATH = "src/*Bundle/Resources/qrc/*.rcc"
    VENDOR_QRC_PATH = "vendor/*Bundle/Resources/qrc/*.qrc"
    VENDOR_RCC_PATH = "vendor/*Bundle/Resources/qrc/*.rcc"

    def __init__(self):
        self.__pyqt_application = QApplication(sys.argv)
        self.__pyqt_resources = QResource()
        self.set_rcc_files()

    @property
    def application(self):
        return self.__pyqt_application

    @application.setter
    def application(self, new_app: QApplication):
        self.__pyqt_application = new_app

    def set_rcc_files(self):
        qrc_files = glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.SRC_QRC_PATH))
        qrc_files += glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.VENDOR_QRC_PATH))
        for qrc in qrc_files:
            subprocess.call(["rcc", "-binary", qrc, "-o", qrc[:-3] + "rcc"])

        rcc_files = glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.SRC_RCC_PATH))
        rcc_files += glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.VENDOR_RCC_PATH))

        for rcc in rcc_files:
            self.__pyqt_resources.registerResource(rcc)

如您所见，我使用的是rcc命令，而不是pyrcc5

最后，这是我的.qrc文件：

<!DOCTYPE RCC>
<RCC version="1.0">
    <qresource>
        <file alias="jquery.js">../js/jquery.js</file>
        <file alias="app.js">../js/app.js</file>
        <file alias="qwebchannel.js">../js/qwebchannel.js</file>
        <file alias="materialize.js">../css/materialize/js/materialize.js</file>
        <file alias="materialize.css">../css/materialize/css/materialize.css</file>
    </qresource>
</RCC>

我知道javascript代码和python代码可能会有很多改进和优化。但是它是这样的！

谢谢，希望我也能帮助别人。

如何使用QWebEngineView和qtwebchannel.js逐步加载javascript？

1 个答案: