如何使用 Qt 嵌入基本的 HTML 页面? [英] How to embed basic HTML page using Qt?

查看:198
本文介绍了如何使用 Qt 嵌入基本的 HTML 页面?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 PySide2.QtWebEngineWidgets.QWebEngineView() 在其上设置 Html 以显示如下所示的基本页面.

I am using PySide2.QtWebEngineWidgets.QWebEngineView() to setHtml on it to show a basic page like below.

这个 html 文件在浏览器中运行良好,因为它所有的文件都在与 html 文件相关的同一文件夹中.

This html file works fine in a browser because it has all the files in the same folder relative to the html file.

一旦我将Html设置为以下文件,我就会收到此异常:

Once I setHtml to the below file, I get this exception:

Qt 错误:

Uncaught ReferenceError: require is not defined

这是否与 Qt 不像常规浏览器那样找不到相关文件有关?或者还有什么我应该做的吗?或者 QWebEngineView 不够先进,无法执行 javascript?如果是这样,我应该使用什么?

Is this related to Qt not finding the relative files unlike a regular browser? Or is there something else I should be doing? Or is QWebEngineView not advanced enough to execute javascript? If so what should I use?

我只想创建一个网页小部件并加载我的 Html,如下所示.其他一切都由 Html 代码完成.

I just want to create a webpage widget and load my Html like below. Everything else is done by the Html code.

重现:

  1. 将以下 html 代码保存为 html 文件
  2. 运行此代码:

from PySide2 import QtCore, QtWidgets, QtGui
from PySide2.QtWebEngineWidgets import QWebEngineView

editor = QWebEngineView()
htmlfile = 'C:/myHtmlFile.html'
with open(htmlfile, 'r') as f:
    html = f.read()
    editor.setHtml(html)
    
editor.show()

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script src="monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript',
            fontFamily:"Verdana",
            theme: "vs-dark"
        });
    });
</script>
</body>
</html>

推荐答案

(免责声明:我不是 javascript 专家)

require 命令需要文件系统信息,因此您不能使用 HTML 字符串,但您需要创建一个 HTML 文件并使用 load() 加载它:

The require command needs file system information so you can't use an HTML string but you need to create an HTML file and load it using load():

import os

from PySide2 import QtCore, QtWidgets, QtWebEngineWidgets


CURRENT_DIR = os.path.dirname(os.path.realpath(__file__))


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    view = QtWebEngineWidgets.QWebEngineView()

    filename = os.path.join(CURRENT_DIR, "index.html")
    view.load(QtCore.QUrl.fromLocalFile(filename))
    view.show()
    sys.exit(app.exec_())

├── index.html
├── main.py
└── monaco-editor
    ├── CHANGELOG.md
    ├── dev
    ├── esm
    ├── LICENSE
    ├── min
    ├── min-maps
    ├── monaco.d.ts
    ├── package.json
    ├── README.md
    └── ThirdPartyNotices.txt

这篇关于如何使用 Qt 嵌入基本的 HTML 页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆