从 JavaScript 调用 Qml 函数答案

【问题标题】：Calling Qml function From JavaScript从 JavaScript 调用 Qml 函数
【发布时间】：2015-09-27 07:16:16
【问题描述】：

我正在使用 Qt 开发一个应用程序，但我遇到了一个问题，我想从 JavaScript 调用 QML 函数来处理从我的 HTML 触发的特定事件。

我尝试了以下方法：

app.html

<html>
<head><title>Myapp</title></head>
<script src="testjs.js" type="text/javascript"></script>
<body bgcolor="orange">
<p id="demo" onclick="myFunction1()">Click me to change my text color.</p>
</body>
</html>

testjs.js

function myFunction1() {
    alert("alert");
    someComponent.someSlot(30);
    someComponent.someSlot(31);
}

main.qml

import 'testjs.js' as JavascriptObject


ApplicationWindow {
    id: someComponent
    visible: true
    x: initialX
    y: initialY
    width: initialWidth
    height: initialHeight
    title: webView.title

    WebView {
        id: webView
        anchors.fill: parent
        url: initialUrl
    }
    function someSlot(v) {
        console.log("Signal received " + v);
    }
    Component.onCompleted: {
        JavascriptObject.myFunction1(41);
     }
}

在应用程序启动时，testjs.js 中的 myFunction1() 被调用，它也在我的 QML 中调用 someSlot 函数，但不显示警报。当从 HTML 页面调用 myFunction1() 函数时，仅显示 alert 而不会调用 someSlot 函数。

【问题讨论】：

调用Qml函数是什么意思？您想在某个类的某个实例上调用方法吗？只需给该类一个id，然后以id.method_name 调用该方法。该文档包含大量示例。
@skypjack 我已经修改了我的问题。你能帮忙吗？
app.html 根本没有意义。该应用程序是您通过命令式 JavaScript 或声明性绑定对其进行操作的 qml 文件。就是这样。

标签： javascript html function qml

【解决方案1】：

您不能在 QML 中使用 alert()，因为它没有被映射。您有两种解决方案：

使用console.log
使用在 QML 中实例化的 BoxDialog，并从 JS 启动它。

【讨论】：

【解决方案2】：

您可能想使用 Qt 的 WebChannel。它用于使用 WebSockets 在托管的 HTML 内容和外部资源之间进行通信。有关更多信息，请参阅此内容：

http://doc.qt.io/qt-5/qtwebchannel-index.html

【讨论】：