QWebChannel - js: Uncaught ReferenceError: qt is not defined

[raven-worx]

@maximus
can you show how you include the qwebchannel.js into your page.
Are you using a custom HTML page? or are you loading a page?

[raven-worx]

@maximus
Here is a way to include the webchannel stuff without worrying anymore:

QWebEngineProfile* profile = new QWebEngineProfile("MyWebChannelProfile", parent);

QFile webChannelJsFile(":/qtwebchannel/qwebchannel.js");
if(  !webChannelJsFile.open(QIODevice::ReadOnly) )
{
      qFatal( QString("Couldn't open qwebchannel.js file: %1").arg(webChannelJsFile.errorString()) );
}
else
{
        QByteArray webChannelJs = webChannelJsFile.readAll();
        webChannelJs.append( 
                 "\n"
                 "new QWebChannel(qt.webChannelTransport, function(channel) {"
                 "     workoutObject = channel.objects.workoutObject;"
                 "});"
        );

        QWebEngineScript script;
            script.setSourceCode(webChannelJs);
            script.setName("qwebchannel.js");
            script.setWorldId(QWebEngineScript::MainWorld);
            script.setInjectionPoint(QWebEngineScript::DocumentCreation);
            script.setRunsOnSubFrames(false);
        profile->scripts()->insert(script);
    }

Then make sure you create a QWebEnginePage with the profile on your view: new QWebEnginePage(profile,view)

[maximus]

hey @raven-worx, thanks for the reply

I am using a custom html page that I control.
The .js file is loaded this way:
<script type="text/javascript" src="http://localhost/assets/js/qwebchannel.js"></script>
I then have another <script> section at the end of my page that is creating a QWebChannel
I can access the page source and click on the link fine to see the js file.

Also note that I am using Designer to create my QWebEngineView so object is already instantiated in my .cpp

I'll try loading it your way and post my result soon.
Thanks

[maximus]

You are a lifesaver, it worked this way! Now to figure out how to strip and put this code generic because I use around 10 QWebEngineView :)

QWebEngineProfile *profile = new QWebEngineProfile("MyWebChannelProfile", this);

    QFile webChannelJsFile(":/qtwebchannel/qwebchannel.js");
    if(  !webChannelJsFile.open(QIODevice::ReadOnly) ) {
        qDebug() << QString("Couldn't open qwebchannel.js file: %1").arg(webChannelJsFile.errorString());
    }
    else {
        qDebug() << "OK webEngineProfile";
        QByteArray webChannelJs = webChannelJsFile.readAll();
        webChannelJs.append(
                    "\n"
                    "var workoutobject"
                    "\n"
                    "new QWebChannel(qt.webChannelTransport, function(channel) {"
                    "     workoutobject = channel.objects.workoutobject;"
                    "});"
                    );

        QWebEngineScript script;
        script.setSourceCode(webChannelJs);
        script.setName("qwebchannel.js");
        script.setWorldId(QWebEngineScript::MainWorld);
        script.setInjectionPoint(QWebEngineScript::DocumentCreation);
        script.setRunsOnSubFrames(false);
        profile->scripts()->insert(script);
    }

    QWebEnginePage *myPage = new QWebEnginePage(profile, ui->webView_workouts);
    ui->webView_workouts->setPage(myPage);

    QWebChannel *channel = new QWebChannel(myPage);
    ui->webView_workouts->page()->setWebChannel(channel);
    channel->registerObject("workoutobject", this);

    ui->webView_workouts->load(QUrl(Environnement::getUrlWorkout()));

And now my .js page doesn't have anything related to Qt, really clean result.
Thanks a lot
Max

[maximus]

I am running into problem using profile->scripts()->insert(script);
There is conflict with multiple scripts that I insert in my shared QWebEngineProfile.
I use the same QWebEngineProfile on all my webpage in my application in order to keep cookie data, etc.

So when I insert a new script, it overwrite the last one inserted and screw up my QWebChannel initialization
Resulting in warning like "js: Uncaught ReferenceError: zoneObject is not defined"
Trying to find a solution..
script.setWorldId(QWebEngineScript::MainWorld); maybe set a unique worldID for each page but that doesnt seem to work now

[maximus]

Solution found, insert the script to the page instead of the profile

void WorkoutCreator::createWebChannel() {

    QWebEngineProfile *profile = QWebEngineProfile::defaultProfile();

    QFile webChannelJsFile(":/qtwebchannel/qwebchannel.js");
    if(  !webChannelJsFile.open(QIODevice::ReadOnly) ) {
        qDebug() << QString("Couldn't open qwebchannel.js file: %1").arg(webChannelJsFile.errorString());
    }
    else {
        qDebug() << "OK webEngineProfile";
        QByteArray webChannelJs = webChannelJsFile.readAll();
        webChannelJs.append(
                    "\n"
                    "var workoutCreator"
                    "\n"
                    "new QWebChannel(qt.webChannelTransport, function(channel) {"
                    "     workoutCreator = channel.objects.workoutCreator;"
                    "});"
                    "\n"
                    "function enableSaveButton(forceOff) {"
                    "if (forceOff) {$('#btn-save-workout').prop('disabled', true);return;}"
                    "var nameValue = $('#name-workout').val();"
                    "var planValue =   $('#plan-workout').val();"
                    "var creatorValue = $('#creator-workout').val();"
                    "if (nameValue.length > 0 && creatorValue.length > 0 && planValue.length > 0) {$('#btn-save-workout').prop('disabled', false);}"
                    "else {$('#btn-save-workout').prop('disabled', true);}"
                    "}"
                    );

        QWebEngineScript script;
        script.setSourceCode(webChannelJs);
        script.setName("qwebchannel.js");
        script.setWorldId(QWebEngineScript::MainWorld);
        script.setInjectionPoint(QWebEngineScript::DocumentCreation);
        script.setRunsOnSubFrames(false);
        //        profile->scripts()->insert(script);

        QWebEnginePage *myPage = new QWebEnginePage(profile, ui->webView_createWorkout);
        ui->webView_createWorkout->setPage(myPage);
        myPage->scripts().insert(script);

        QWebChannel *channel = new QWebChannel(myPage);
        ui->webView_createWorkout->page()->setWebChannel(channel);
        channel->registerObject("workoutCreator", this);
    }
}

[Munish]

@maximus
Just wanted to know, will c++ objects (workoutCreator) available to other javascript also?
I am getting "undefined" error while accessing c++ object slots/function from script other than qwebchannel.js

[SherifOmran]

@Munish if you checked the "enable Qt Quick compiler" in the build setting, you may get this error. I got it also.

[KWanH]

when page finish,Run this!

	QString js;
	QFile jsFile(":/ServiceNumber/Resource/ServiceNumber/qwebchannel.js");
	jsFile.open(QIODevice::ReadOnly);
	js = jsFile.readAll();
	webView->page()->runJavaScript(js);

[Unicode]

call page()->setWebChannel() before QWebEngineView::load()

==>
.......
QWebChannel *channel = new QWebChannel(ui->webView_workouts->page());
ui->webView_workouts->page()->setWebChannel(channel);
channel->registerObject(QString("workoutObject"), this);
......
ui->webView_workouts->load(QUrl(Environnement::getUrlWorkout()));
.......

[hank_yu]

@Unicode this way works! thank you!