javascript - 如何使用 QWebEngineView 和 qtwebchannel.js 逐步加载 javascript?
问题描述
我正在像一个框架一样设置,在后端使用 python,在前端使用 html/css/js。我的问题是在加载 QWebEngineView 期间出现的。
我在网上搜索了如何使用 QWebEngineView 在 python 和 javascript 之间建立通信,最后我尝试使用 QtWebChannel。所以我设置了一切,一切都很好地与 python 和 javascript 之间的通信,但出现了下一个问题:
- 第一:我不能直接在带有标签的html中加载javascript文件
<script>
- 第二:javascript随机加载,我尝试从python加载javascript,
my_view.page().runJavascript(my_js)
但一次尝试两次。所以有时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:线:67
- js: 未捕获的 ReferenceError: $ 未定义
- js: 加载 javascript: 好的
对此有什么帮助吗?
先感谢您!
解决方案
我解决了我的问题,感谢@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
调用 js 的方法。<script>
qrc:///
现在我的 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
i 使用QResource
and文件.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 代码可以有很多改进和优化。但它是这样工作的!
谢谢,希望我也能帮助别人。
推荐阅读
- kotlin - Kotlin - 使用 SimpleXml 解析带有列表的 Xml 响应
- overflow - VHDL在简单8位处理器中添加和两个8位寄存器
- php - 关于wordpress中comment.php模板和标题的问题
- python - 将代码从 Python 转换为 C++ 时出错
- c# - 如何在 dotnet 构建中解决同名文件的 CopyToOutputDirectory 冲突?
- docker - 如何为部署在 Celery 集群上的所有任务分配相同数量的资源?
- php - 如何在 Laravel 上使用 max() 连接多个表
- django - 纯python中{% static %}的类比
- python - Python Keras LSTM“检查输入时出错”
- postgresql - 将 Spring Boot 应用程序部署到 Google App Engine - 连接到 SQL 实例 (PostgreSQL) 的问题