How to import local JavaScript files using QWebEngineView?

Question

I'm trying to build a simple example displaying HTML including JavaScript code in a PyQt window:

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_())

But apparently, the jQuery JavaScript file, located right next to my Python script, is not properly loaded as I get the following error:

js: Uncaught ReferenceError: $ is not defined

I've tried moving the jQuery <script> tag just above the other one in the <body>, I've added the --disable-web-security argument (following this), I've tried not using the "file:///" protocol prefix, but I still get the same error.

I've also tried to print the JavaScript window path name (console.error(window.location.pathname)), and I get the following, which seems strange to me:

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

I'd be glad if you could provide some insight as to what might be wrong here!

eyllanesc · Accepted Answer · 2021-04-30 21:14:02Z

5

You need to pass a local url as baseUrl to indicate that the html has a local schema drive so it can load local files.

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)),
)

answered Apr 30, 2021 at 21:14

eyllanesc

246k19 gold badges205 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to import local JavaScript files using QWebEngineView?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related