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

【问题标题】：How to import local JavaScript files using QWebEngineView?如何使用 QWebEngineView 导入本地 JavaScript 文件？
【发布时间】：2021-07-24 03:32:41
【问题描述】：

我正在尝试构建一个在 PyQt 窗口中显示包含 JavaScript 代码的 HTML 的简单示例：

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 参数（在 this 之后），我尝试不使用“文件:///" 协议前缀，但我仍然得到同样的错误。

我还尝试打印 JavaScript 窗口路径名 (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

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

【问题讨论】：

标签： python pyqt pyqt5 qtwebengine qwebengineview

【解决方案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)),
)

【讨论】：