how to call native js function using qml webview or webengineview
-
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?
-
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?
for those who have sameproblem see answer in