python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法


Posted in Python onFebruary 26, 2020

PyQt5浏览器控件QWebEngineView

PyQt5使用QWebEngineView控件来展示HTML页面,对老版本的QWebView类不在进行维护,因为QWebEngineView使用CHromium内核可以给用户带来更好的体验

QWebEngineView类中常用方法

方法 描述
load(QUrl url) 加载指定的URL并显示
setHtml(QString&html) 将网页视图的内容设置为指定的HTML内容

QWebEngineView控件使用load()函数加载一个Web页面,实际上就是使用HTTP Get方法加载web页面,这个控件可以加载本地的web页面,也可以加载外部的WEb页面,其核心代码如下

view=QWebEngineView()
view.load(QUrl('https://3water.com'))
view.show()

QWebEngineView加载显示外部的web页面实例

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

class MainWindow(QMainWindow):
  def __init__(self):
    super(MainWindow, self).__init__()
    self.setWindowTitle('加载外部网页的例子')
    self.setGeometry(5,30,1355,730)
    self.browser=QWebEngineView()
    #加载外部的web界面
    self.browser.load(QUrl('https://3water.com'))
    self.setCentralWidget(self.browser)
if __name__ == '__main__':
  app=QApplication(sys.argv)
  win=MainWindow()
  win.show()
  app.exit(app.exec_())

运行效果图如下

python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法

在这里,我输入的url是我的博客地址,所以加载的也就是这个网址请求的web界面

QWebEngineView加载并显示嵌入的HTML代码

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

class MainWindow(QMainWindow):
  def __init__(self):
    super(MainWindow, self).__init__()
    self.setWindowTitle('加载本地网页的例子')
    self.setGeometry(5,30,1355,730)
    self.browser=QWebEngineView()
    # #加载外部的web界面
    # url=r'index.html'
    # self.browser.load(QUrl(url))

    self.browser.setHtml('''<!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <title>Title</title>
                </head>
                <body>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>

                </body>
                </html>''')
    self.setCentralWidget(self.browser)
if __name__ == '__main__':
  app=QApplication(sys.argv)
  win=MainWindow()
  win.show()
  app.exit(app.exec_())

运行图片如下

python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法

注意使用QWebEngineView对象的setHTML()函数渲染HTml页面时,如果页面中使用的JavaScript代码超过2M,程序渲染就会失败

QWebEngineView调用JavaScript代码实例

通过QWebEnginePage类的runJavaScript(str,Callable)函数可以方便地实现PyQt和HTML、JavaScript的双向通信,也实现了python代码和Html,JavaScript代码的解耦,便于开发人员进行分工协作,在PyQt对象中,访问JavaScript的核心代码如下

QWebEnginePage.runJavaScript(str,Callable)

完整代码

import sys

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

# 创建一个 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_())

python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法

代码分析

在本例中,初始化一个QWebEngineView对象,对象名称View,然后通过View。page()函数获得一个QWebEnginePage对象,就可以访问整个web界面了。这个QWebEnginePage对象有一个异步的runJavaScript()函数,需要一个回调函数接收结果,其核心代码如下

def js_callback( result ):
  print(result)


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

本文详细介绍了PyQt5浏览器控件QWebEngineView的使用方法,包括使用QWebEngineView调用JavaScript代码,更多关于PyQt5浏览器控件QWebEngineView的使用方法请查看下面的相关链接

Python 相关文章推荐
Python struct.unpack
Sep 06 Python
详解Python编程中time模块的使用
Nov 20 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
Jan 03 Python
python3中获取文件当前绝对路径的两种方法
Apr 26 Python
多个应用共存的Django配置方法
May 30 Python
浅谈pycharm下找不到sqlalchemy的问题
Dec 03 Python
python中如何实现将数据分成训练集与测试集的方法
Sep 13 Python
Python 寻找局部最高点的实现
Dec 05 Python
Python csv文件记录流程代码解析
Jul 16 Python
python从Oracle读取数据生成图表
Oct 14 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
May 25 Python
python程序的组织结构详解
Dec 06 Python
python序列类型种类详解
Feb 26 #Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
Feb 26 #Python
Python中if有多个条件处理方法
Feb 26 #Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
Feb 26 #Python
Python处理PDF与CDF实例
Feb 26 #Python
用Python绘制漫步图实例讲解
Feb 26 #Python
Django单元测试中Fixtures的使用方法
Feb 26 #Python
You might like
德生PL550的电路分析
2021/03/02 无线电
php中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
Prototype Selector对象学习
2009/07/23 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python的一些用法分享
2012/10/07 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
python tqdm库的使用
2020/11/30 Python
python中time.ctime()实例用法
2021/02/03 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
负责培养人意见
2015/06/05 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
mysql查询结果实现多列拼接查询
2022/04/03 MySQL