Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. how to call native js function using qml webview or webengineview
Forum Update on Monday, May 27th 2025

how to call native js function using qml webview or webengineview

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 272 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jasonyu
    wrote on 21 Aug 2023, 05:43 last edited by
    #1

    So I am using qt5.15.3 with qml and trying to handle Native Function Exposure and JavaScript-to-Native Communication

    First I need to clarify my question For example like in Java we have:

    // In your WebView setup code

    WebView webView = findViewById(R.id.webView);
    NativeInterface nativeInterface = new NativeInterface();
    webView.addJavascriptInterface(nativeInterface, "NativeInterface");
    NativeInterface class:
    
    public class NativeInterface {
        @JavascriptInterface
        public void CANBUS_Write(String id,String[] data) {
            // Call the native CANBUS_Write function here with the provided data
        }
    }
    

    In webpage side we got something like:

    function CANBUS_Write(id, data) {
        window.NativeInterface.CANBUS_Write(id, data);
    }
    

    to handle Native Function Exposure and JavaScript-to-Native Communication

    How to deal with the same question in qt5 qml using WebView or Webengineview?
    I have tried:

    import QtWebView 1.1
    
     WebView {
     id:webView
     anchors.fill: parent
     url: "http://192.168.120.56:8888/test"
    
    
    }
    

    What I have tried

    ServerSideHandler.h
    
    #ifndef SERVERSIDEHANDLER_H
    #define SERVERSIDEHANDLER_H
    
    
    
    #include <QObject>
    #include <QStringList>
    
    class ServerSideHandler : public QObject
    {
        Q_OBJECT
    public:
        explicit ServerSideHandler(QObject *parent = nullptr);
    
    public slots:
        void CANBUS_Write(const QString &ID, const QStringList &data);
    };
    
    #endif // SERVERSIDEHANDLER_H
    ServerSideHandler.cpp
    
    #include "serversidehandler.h"
    #include <QDebug>
    
    ServerSideHandler::ServerSideHandler(QObject *parent) : QObject(parent)
    {
            qDebug() <<"Init";
    }
    
    void ServerSideHandler::CANBUS_Write(const QString &ID, const QStringList &data)
    {
        QStringList sBuffer;
        for (const QString &item : data) {
            sBuffer.append(item);
        }
        qDebug() << "CANBUS_Write ID" << ID << ", data =" << sBuffer.join(' ');
    }
    

    main.cpp

    qmlRegisterType<ServerSideHandler>("ServerSideHandler", 1, 0, "ServerSideHandler");
    

    main.qml

    ServerSideHandler{
           id :server
    
       }
    
       WebView {
           id:webView
           anchors.fill: parent
          
           url: "http://192.168.120.56:8888/test"
           
           Component.onCompleted: {
    
               channel.registerObject("NativeInterface",server);
           }
      
           WebChannel{
               id: channel
    
           }
      
       }
    

    but did not work out can anyone help me out with the problem?

    J 1 Reply Last reply 22 Aug 2023, 08:32
    0
    • J jasonyu
      21 Aug 2023, 05:43

      So I am using qt5.15.3 with qml and trying to handle Native Function Exposure and JavaScript-to-Native Communication

      First I need to clarify my question For example like in Java we have:

      // In your WebView setup code

      WebView webView = findViewById(R.id.webView);
      NativeInterface nativeInterface = new NativeInterface();
      webView.addJavascriptInterface(nativeInterface, "NativeInterface");
      NativeInterface class:
      
      public class NativeInterface {
          @JavascriptInterface
          public void CANBUS_Write(String id,String[] data) {
              // Call the native CANBUS_Write function here with the provided data
          }
      }
      

      In webpage side we got something like:

      function CANBUS_Write(id, data) {
          window.NativeInterface.CANBUS_Write(id, data);
      }
      

      to handle Native Function Exposure and JavaScript-to-Native Communication

      How to deal with the same question in qt5 qml using WebView or Webengineview?
      I have tried:

      import QtWebView 1.1
      
       WebView {
       id:webView
       anchors.fill: parent
       url: "http://192.168.120.56:8888/test"
      
      
      }
      

      What I have tried

      ServerSideHandler.h
      
      #ifndef SERVERSIDEHANDLER_H
      #define SERVERSIDEHANDLER_H
      
      
      
      #include <QObject>
      #include <QStringList>
      
      class ServerSideHandler : public QObject
      {
          Q_OBJECT
      public:
          explicit ServerSideHandler(QObject *parent = nullptr);
      
      public slots:
          void CANBUS_Write(const QString &ID, const QStringList &data);
      };
      
      #endif // SERVERSIDEHANDLER_H
      ServerSideHandler.cpp
      
      #include "serversidehandler.h"
      #include <QDebug>
      
      ServerSideHandler::ServerSideHandler(QObject *parent) : QObject(parent)
      {
              qDebug() <<"Init";
      }
      
      void ServerSideHandler::CANBUS_Write(const QString &ID, const QStringList &data)
      {
          QStringList sBuffer;
          for (const QString &item : data) {
              sBuffer.append(item);
          }
          qDebug() << "CANBUS_Write ID" << ID << ", data =" << sBuffer.join(' ');
      }
      

      main.cpp

      qmlRegisterType<ServerSideHandler>("ServerSideHandler", 1, 0, "ServerSideHandler");
      

      main.qml

      ServerSideHandler{
             id :server
      
         }
      
         WebView {
             id:webView
             anchors.fill: parent
            
             url: "http://192.168.120.56:8888/test"
             
             Component.onCompleted: {
      
                 channel.registerObject("NativeInterface",server);
             }
        
             WebChannel{
                 id: channel
      
             }
        
         }
      

      but did not work out can anyone help me out with the problem?

      J Offline
      J Offline
      jasonyu
      wrote on 22 Aug 2023, 08:32 last edited by
      #2

      for those who have sameproblem see answer in

      https://stackoverflow.com/questions/76919835/in-qt5-15-qml-how-to-deal-with-native-function-exposure-and-javascript-to-native

      1 Reply Last reply
      0

      1/2

      21 Aug 2023, 05:43

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved