如何使用 QWebEngineView 导入本地 JavaScript 文件？

Question

我正在尝试构建一个显示 HTML 的简单示例，包括 PyQt Z05B8C74CBD90FBF2DEZC1A54 中的 JavaScript 代码：

python
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QVBoxLayout
from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QUrl,QDir
from PyQt5.QtWebEngineWidgets import QWebEngineView

class Example(QWidget):

    def __init__(self):
        super().__init__()
        vbox = QVBoxLayout(self)
        self.webEngineView = QWebEngineView()

        self.webEngineView.setHtml("""
            <!DOCTYPE html>
            <html lang="en">
              <head>
                <meta charset="utf-8">
                <script src="file:///home/path/to/jquery-3.6.0.min.js"></script>
              </head>
              <body>
                <!-- page content -->
                <span id="aaa">toto</span>
                <script>
                    $("#aaa").hide()
                </script>
              </body>
            </html>""")

        vbox.addWidget(self.webEngineView)
        self.setLayout(vbox)
        self.show()

sys.argv.append("--disable-web-security")
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())

但显然，位于我的 Python 脚本旁边的 jQuery JavaScript 文件没有正确加载，因为我收到以下错误：

js: Uncaught ReferenceError: $ is not defined

我尝试将 jQuery <script>标签移动到<body>中另一个标签的上方，我添加了--disable-web-security参数（在此之后），我尝试不使用“文件： ///" 协议前缀，但我仍然得到同样的错误。

我还尝试打印 JavaScript window 路径名（ console.error(window.location.pathname) ），我得到以下信息，这对我来说似乎很奇怪：

js: text/html;charset=UTF-8,%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%21DOCTYPE%20html%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Chtml%20lang%3D%22en%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Chead%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Etitle%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22style.css%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cscript%20src%3D%22script.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fhead%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%21--%20page%20content%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22aaa%22%3Etoto%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.error%28document.location.pathname%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%24%28%22%23aaa%22%29.hide%28%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fhtml%3E

如果您能提供一些关于这里可能有什么问题的见解，我会很高兴！

Answer 1

您需要将本地 url 作为baseUrl传递，以指示 html 具有本地模式驱动器，以便它可以加载本地文件。

from pathlib import Path

self.webEngineView.setHtml(
    """
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <script src="file:///home/path/to/jquery-3.6.0.js"></script>
      </head>
      <body>
        <!-- page content -->
        <span id="aaa">toto</span>
        <script>
            $("#aaa").hide()
        </script>
      </body>
    </html>""",
    baseUrl=QUrl.fromLocalFile(str(Path(__file__).resolve().parent)),
)

如何使用 QWebEngineView 导入本地 JavaScript 文件？

问题描述

1 个解决方案

解决方案1
2 2021-04-30 21:14:02

如何使用 QWebEngineView 导入本地 JavaScript 文件？

问题描述

1 个解决方案

解决方案1 2 2021-04-30 21:14:02

解决方案1
2 2021-04-30 21:14:02