javascript - 最小的 QWebChanel 示例不起作用-6ren

javascript - 最小的 QWebChanel 示例不起作用

转载作者：塔克拉玛干更新时间：2023-11-03 07:09:52

我必须将我的代码移植到 QT 5.8。不幸的是，现有代码不再有效，因为 QWebEngine 的接口(interface)发生了变化。在更改了最简单的部分后，通过搜索和替换我陷入了使用新 QWebChannel 类的困境。

我只是没有让它正常工作。在我的小部件中，我允许客户端使用 JQuery 轻松地用内容填充 HTML 模板。通过将值从我的 C++ 应用程序传输到简单的 Javascript 代码，这非常有效。

但我无法使用新的 Qt 5.8。 QWebChannel 接口(interface)。我还尝试使用 --remote-debugging-port=10 命令行开关和 Chrome 开发者工具对其进行调试。

qt.webChannelTransport 为 Chrome 调试器所知。但是它不知道类QWebChannel？奇怪的是，$(document).ready(...) 的代码从未执行过。

如果我在 Chrome 开发者工具控制台中键入 qt.webChannelTransport.send("234234")，程序就会崩溃。

因此我决定做一个最小的例子来说明我想要实现的目标。熟悉正确用法的人应该很容易。我也无法使用我的 Visual Studio 调试 Javascript 代码，甚至不确定这是否可以通过某种方式实现？

我很抱歉所有这些冗长的代码，但它似乎是最接近获得工作示例的代码。

main.cpp

#include <QWebChannel>
#include <QWebEngineView>
#include <QApplication>
#include <QFile>
#include "JsWebPage.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    auto view = new QWebEngineView;

    view->setPage(new JsWebPage);

    QFile file(":/Example.html");
    if (!file.open(QIODevice::ReadOnly)) return false;
    QString content = QString::fromUtf8(file.readAll()); 
    view->setHtml(content);
    file.close();
    //view->page()->setHtml(content);
    view->show();
    return app.exec();
}

JsWebPage.h

#pragma once

#include <QWebEnginePage>

class JsWebPage : public QWebEnginePage {
    Q_OBJECT

public:
    JsWebPage();

    void javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, const QString &message, int lineNumber, const QString &sourceID) override;

private:
    QWebChannel* mWebChannel = nullptr;
};

JsWebPage.cpp

#include "JsWebPage.h"
#include <QWebChannel>
#include <QWebEngineSettings>
#include <QWebEnginePage>
#include <QDebug>

void JsWebPage::javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, const QString &message, int lineNumber, const QString &sourceID)
{
    qDebug() << QString("Javascript Console: Line: %1, Source: %2, %3").arg(lineNumber).arg(sourceID).arg(message);
}

JsWebPage::JsWebPage()
{
    settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessRemoteUrls, true);
    settings()->setAttribute(QWebEngineSettings::JavascriptCanOpenWindows, true);

    mWebChannel=new QWebChannel;
    mWebChannel->registerObject(QString("qtObject"), this);
    setWebChannel(mWebChannel);
}

example.js

new QWebChannel(
    qt.webChannelTransport, 
    function(channel) {
        var qtObject = channel.objects.qtObject;
        console.log("Hello world");
        // Code for replacing using jQuery
        // <div id="myTag1"></div>
        // by
        // <div id="myTag1">Content</div>
    }
);

$(document).ready(
    console.log("READY"); // Program never reached this point. Why?
);

Example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="qwebchannel.js" type="text/javascript"></script>
    <script src="example.js" type="text/javascript"></script>
    <title>Template</title>
</head>
<body id="Body"> 
    Example HTML
    <div id="myTag1"></div>
    <div id="myTag2"></div>
</body>
</html>

以下是我在使用 Chrome 调试我的程序后说的话:

最佳答案

使用 Chrome 开发者工具，我能够获得我的程序的运行版本。错误大多是微妙且难以调试的。

我在这里发布我的代码是为了帮助其他遇到同样问题的人。

潜在错误:

格式错误的 HTML
找不到 Javascript 文件(在错误的地方)
- 我现在将它们全部放入一个资源文件中。
- 看看 Example.html!
JavaScript 错误
- Chrome 开发者工具在这里很有用
Javascript extractKeys() 函数在错误的地方调用

main.cpp

#include <QWebChannel>
#include <QWebEngineView>
#include <QApplication>
#include <QFile>
#include "JsWebPage.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    auto view = new QWebEngineView;

    view->setPage(new JsWebPage);

    QFile file(":/Example.html");
    if (!file.open(QIODevice::ReadOnly)) return false;
    QString content = QString::fromUtf8(file.readAll());
    view->setHtml(content);
    file.close();
    view->show();
    return app.exec();
}

JsWebPage.h

#pragma once

#include <QWebEnginePage>

class JsWebPage : public QWebEnginePage {
    Q_OBJECT

public:
    JsWebPage();

    void javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, const QString &message, int lineNumber, const QString &sourceID) override;

signals:
    void extractKeys();

public slots:
    void onKeysExtracted(QStringList keys);

private:

    QWebChannel* mWebChannel = nullptr;
};

JsWebPage.cpp

#include "JsWebPage.h"
#include <QWebChannel>
#include <QWebEngineSettings>
#include <QWebEnginePage>
#include <QDebug>

void JsWebPage::javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, const QString &message, int lineNumber, const QString &sourceID)
{
    qDebug() << QString("Javascript Console: Line: %1, Source: %2, %3").arg(lineNumber).arg(sourceID).arg(message);
}

void JsWebPage::onKeysExtracted(QStringList keys)
{
    qDebug() << keys;
}

JsWebPage::JsWebPage()
{
    settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessRemoteUrls, true);
    settings()->setAttribute(QWebEngineSettings::JavascriptCanOpenWindows, true);

    mWebChannel=new QWebChannel;
    mWebChannel->registerObject(QString("qtObject"), this);
    setWebChannel(mWebChannel); 
}

Example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
    <script src="qrc:///jquery.js" type="text/javascript"></script>
    <script src="qrc:///qwebchannel.js" type="text/javascript"></script>
    <script src="qrc:///example.js" type="text/javascript"></script>
    <title>Template</title>
</head>
<body id="Body"> 
    Example HTML
    <div id="myTag1"></div>
    <div id="myTag2"></div>
</body>
</html>

example.js

var webChannel=new QWebChannel(
    qt.webChannelTransport, 
    function(channel) {
        extractKeys();
    }
);

function extractKeys() {
    try {
        var valueTable = [];
        $("[id]").each(
            function () {
                valueTable.push($(this).attr("id"));
            }
        );
        webChannel.objects.qtObject.onKeysExtracted(valueTable);
    }
    catch (e) {
        console.log(e);
    }
}

resource.qrc

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>Example.html</file>
<file>example.js</file>
<file>qwebchannel.js</file>
<file>jquery.js</file>
</qresource>
</RCC>

关于javascript - 最小的 QWebChanel 示例不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43513676/