Skip to content

Instantly share code, notes, and snippets.

@mphuie

mphuie/index.html

Last active January 30, 2025 09:09
Show Gist options
  • Save mphuie/63e964e9ff8ae25d16a949389392e0d7 to your computer and use it in GitHub Desktop.
Save mphuie/63e964e9ff8ae25d16a949389392e0d7 to your computer and use it in GitHub Desktop.
Download ZIP
pyqt webview javascript -> python example
Raw
index.html
<html>
<head>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<style>
::selection {
background:transparent;
}
</style>
</head>
<body>
<div class="container">
<h1>Hi!</h1>
</div>
<script language="JavaScript">
new QWebChannel(qt.webChannelTransport, function (channel) {
window.handler = channel.objects.handler;
handler.test(function(retVal) {
// console.error as console.log message don't show up in the python console
console.error(JSON.stringify(retVal));
})
});
</script>
</body>
</html>
Raw
main.py
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtCore import QObject, pyqtSlot, QUrl, QVariant
import os
class CallHandler(QObject):
@pyqtSlot(result=QVariant)
def test(self):
print('call received')
return QVariant({"abc": "def", "ab": 22})
# take an argument from javascript - JS: handler.test1('hello!')
@pyqtSlot(QVariant, result=QVariant)
def test1(self, args):
print('i got')
print(args)
return "ok"
class WebView(QWebEngineView):
def __init__(self):
super(WebView, self).__init__()
self.channel = QWebChannel()
self.handler = CallHandler()
self.channel.registerObject('handler', self.handler)
self.page().setWebChannel(self.channel)
file_path = os.path.abspath(os.path.join(os.path.dirname(__file__), "index.html"))
local_url = QUrl.fromLocalFile(file_path)
self.load(local_url)
if __name__ == "__main__":
app = QApplication([])
view = WebView()
view.show()
app.exec_()
@MShirazAhmad
Copy link

I got an error:

from PyQt5.QtWebEngineWidgets import QWebEngineView
ImportError: QtWebEngineWidgets must be imported before a QCoreApplication instance is created

@pseudo-usama
Copy link

pseudo-usama commented Jul 3, 2020 •
edited
Loading

How to send data from Python to JS & back from JS to Python ...???

@MATLABmdl
Copy link

MATLABmdl commented Jun 19, 2023 •
edited
Loading

You can communicate between Python and JavaScript code in a QWebEngineView in PyQt5 using the WebChannel API.

To send data from Python to JavaScript:

  1. Create a QWebChannel object:
channel = QWebChannel()
  1. Add a Python object to expose to JavaScript:
class PyObj:
    def sendData(self, data):
        print(f"Received from JS: {data}")
        
obj = PyObj()
channel.registerObject("pyObj", obj)
  1. Set the channel on the QWebEngineView:
view.page().setWebChannel(channel)
  1. In JavaScript, access the Python object:
var pyObj = new QWebChannel(qt.webChannelTransport);
pyObj.objects.pyObj.sendData("Data from JS!");
  1. The sendData() method in Python will be called.

To send data from Python to JavaScript, call a JavaScript function:

view.page().runJavaScript("jsFunction(data);")

And define the jsFunction() in JavaScript:

function jsFunction(data) {
  console.log(data);
}

Hope this helps!

@POMXARK
Copy link

POMXARK commented Jun 2, 2024 •
edited
Loading

Thank you.
updated code for PySide6

  <script language="JavaScript">
      
        new QWebChannel(qt.webChannelTransport, function (channel) {
          window.handler = channel.objects.handler;
          handler.test(function(retVal) {
            // console.error as console.log message don't show up in the python console
            console.error(JSON.stringify(retVal));
          })

          handler.send_to_server('hello')
        });
  </script>
import json
from PySide6.QtCore import QObject, Slot, QUrl, QJsonValue

class CallHandler(QObject):

  @Slot(result=str)
  def test(self):
      print('call received')
      return json.dumps({"abc": "def", "ab": 22})

  # take an argument from javascript - JS:  handler.send_to_server('hello!')
  @Slot(QJsonValue)
  def send_to_server(self, *args):
      print('i got')
      print(args)
      for arg in args:
          print(arg.toString())

@LinuxMainframe
Copy link

Thanks, this helps a lot. I am using it to communicate with an embedded webapp inside python (inside the QWebEngineView). This was necessary because the webapp was sandboxed by the older engine inside QWebEngineView. So far I was able to restore Save/Load and retaining webapp internal settings after connecting the webapp and the python program.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment