PyQt5 与html交互

最新推荐文章于 2024-08-23 13:08:01 发布

Tsai时越

最新推荐文章于 2024-08-23 13:08:01 发布

阅读量3.3k

点赞数 1

分类专栏： PyQt5

本文链接：https://blog.csdn.net/qq_27694835/article/details/111871849

版权

PyQt5 专栏收录该内容

54 篇文章 11 订阅

订阅专栏

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
# from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWebEngineWidgets import QWebEngineView

################################################
#######创建主窗口
################################################
class MainWindow(QDialog):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setWindowTitle('My Browser')
        # self.showMaximized()
        self.setGeometry(100, 100, 400, 400)

        self.button = QPushButton("get")
        self.webview = QWebEngineView()
        self.layout = QVBoxLayout()
        self.setLayout(self.layout)  # 设置垂直布局

        # 嵌入html代码
        self.webview.setHtml("""
        <html>
            <head>
                <title> My browser </title>
            </head>
            <body>
                <label for="number">number:</label>
                <input type="text" name="number" id="number">
                <p />
                <input type="text" name="lab" id="labnumber">
            </body>
        <ml>
        """)

        # 将各控件加入到布局中
        self.layout.addWidget(self.webview)
        self.layout.addWidget(self.button)
        self.button.clicked.connect(self.complete_name)  # 点击按钮后调用javascript代码

    def complete_name(self):
        # javaScript语句，用来控制html的行为（让网页动起来）
        js_string = '''
        function myFunction()
        {
            var number = document.getElementById('number').value;
            document.getElementById('labnumber').value = number;
            return number;
        }

        myFunction();
        '''

        # page()函数获得一个QWebEnginePage对象，就可以访问整个web界面了.
        # runJavaScript(JavaScript代码，回调函数)
        # 如果只注意网页的变化，也可不写回调函数。因为网页的行为只与javaScript代码有关
        self.webview.page().runJavaScript(js_string, self.js_callback)

    # 回调函数
    def js_callback(self, result):
        print(result)  # result的值为javaScript 函数的返回值（return number;）
        # QMessageBox.information(self, "提示", str(result))


################################################
#######程序入门
################################################
if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())

# -*- coding: utf-8 -*-

'''
    【简介】
	QWebView中网页调用JavaScript

'''

from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
from PyQt5.QtWebEngineWidgets import QWebEngineView
import sys

# 创建一个 application实例
app = QApplication(sys.argv)
win = QWidget()
win.setWindowTitle('Web页面中的JavaScript与 QWebEngineView交互例子')

# 创建一个垂直布局器
layout = QVBoxLayout()
win.setLayout(layout)

# 创建一个 QWebEngineView 对象
view = QWebEngineView()
view.setHtml('''
  <html>
    <head>
      <title>A Demo Page</title>
      <script language="javascript">
        // Completes the full-name control and
        // shows the submit button
        function completeAndReturnName() {
          var fname = document.getElementById('fname').value;
          var lname = document.getElementById('lname').value;
          var full = fname + ' ' + lname;
          document.getElementById('fullname').value = full;
          document.getElementById('submit-btn').style.display = 'block';
          return full;
        }
      </script>
    </head>
    <body>
      <form>
        <label for="fname">First name:</label>
        <input type="text" name="fname" id="fname"></input>
        <br />
        <label for="lname">Last name:</label>
        <input type="text" name="lname" id="lname"></input>
        <br />
        <label for="fullname">Full name:</label>
        <input disabled type="text" name="fullname" id="fullname"></input>
        <br />
        <input style="display: none;" type="submit" id="submit-btn"></input>
      </form>
    </body>
  </html>
''')

# 创建一个按钮去调用 JavaScript代码
button = QPushButton('设置全名')


def js_callback(result):
    print(result)


def complete_name():
    view.page().runJavaScript('completeAndReturnName();', js_callback)


# 按钮连接 'complete_name'槽，当点击按钮是会触发信号
button.clicked.connect(complete_name)

# 把QWebView和button加载到layout布局中
layout.addWidget(view)
layout.addWidget(button)

# 显示窗口和运行app
win.show()
sys.exit(app.exec_())