PyQt5使用QtWebEngineWidgets调用js

Happinessคิดถึง

已于 2023-06-16 10:50:06 修改

阅读量1.1k

点赞数 1

分类专栏： PyQt5 文章标签： qt javascript python

于 2023-03-24 14:35:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44353958/article/details/129750151

版权

PyQt5 专栏收录该内容

1 篇文章

订阅专栏

更新时间：2023-06-16

使用版本：

python：3.7.0
IDE：pycharm
在这里插入图片描述
pip install PyQt5==5.10.1 -i https://pypi.douban.com/simple/ --user

超过5.11的PyQt5版本：会报错
from PyQt5.QtWebEngineWidgets import *
模块导入失败。
得单独安装：
pip install PyQtWebEngine
原因：高版本，这个模块被单独划分了出来。

我下载了，但是搞了2h，还是报错。

低版本使用：

只需要PyQt5==5.10.1即可。不需要安装额外的模块。

高版本使用：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ PyQtWebEngine5.15.2
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ PyQt55.15.2
都使用统一版本
但是高版本使用，项目上页面反而有卡顿，现在还不清楚是什么原因

使用例子：

py文件

"""
PyQt5调用JavaScript代码

PyQt5和JavaScript交互
PyQt5和JavaScript互相调用，互相传输数据
"""

import sys
import os
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *


class PyQtCallJS(QWidget):
    def __init__(self):
        super(PyQtCallJS, self).__init__()
        self.setWindowTitle('PyQt5调用JavaScript')
        self.setGeometry(5,30,1355,730)
        # 设置垂直布局
        self.layout = QVBoxLayout()
        # 应用于垂直布局
        self.setLayout(self.layout)
        # 设置Web页面控件
        self.browser =  QWebEngineView()

        url = os.getcwd() + '/test.html'
        self.browser.load(QUrl.fromLocalFile(url))

        # 把web控件放到布局里
        self.layout.addWidget(self.browser)

        button = QPushButton('设置全名')
        self.layout.addWidget(button)

        # 槽和信号绑定
        button.clicked.connect(self.fullname)

    # 添加按钮的单击事件
    # 前两个框自己输入，最后一个框自动相加
    def fullname(self):
        self.value = 'hello world'
        self.browser.page().runJavaScript('fullname("' + self.value +'");',self.js_callback)

    # 通过回调函数返回值
    def js_callback(self,result):
        print(result)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = PyQtCallJS()
    demo.show()
    sys.exit(app.exec_())

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script>
        function fullname(value) {
            //alert("<" + value + ">")
            var t=document.getElementById("firstname");
            t.value=value
            return fullname;
        }
    </script>
</head>
<form>
    <label>First Name:</label>
    <input type="text" name="firstname" id="firstname"></input>
    <br />

</form>

</body>
</html>

效果：

请添加图片描述