Skip to content

Instantly share code, notes, and snippets.

@mphuie

mphuie/index.html

Last active November 10, 2024 17:30
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())

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