Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Inspect element (Html code) using QWebEngineView

Inspect element (Html code) using QWebEngineView

Scheduled Pinned Locked Moved Unsolved General and Desktop
9 Posts 5 Posters 2.8k 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.
  • C Offline
    C Offline
    cpper
    wrote on 3 Mar 2020, 18:49 last edited by
    #1

    Hello, is it possible to display a web page into a QWebEngineView, click on an element in the page, and get the corresponding HTML code of the element ? Like when right-clicking "Inspect" on a element in Chrome.

    R 1 Reply Last reply 3 Mar 2020, 19:23
    0
    • C cpper
      3 Mar 2020, 18:49

      Hello, is it possible to display a web page into a QWebEngineView, click on an element in the page, and get the corresponding HTML code of the element ? Like when right-clicking "Inspect" on a element in Chrome.

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 3 Mar 2020, 19:23 last edited by
      #2

      @cpper
      if you actually want to inspect the element, qtwebengine provides debug tools via a desktop chrome browser

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      2
      • C Offline
        C Offline
        cpper
        wrote on 3 Mar 2020, 22:12 last edited by
        #3

        I don't need the debug tools window (like the one you get with F12 in chrome), I just want to get the html source of the clicked element.

        R 1 Reply Last reply 4 Mar 2020, 07:48
        0
        • C cpper
          3 Mar 2020, 22:12

          I don't need the debug tools window (like the one you get with F12 in chrome), I just want to get the html source of the clicked element.

          R Offline
          R Offline
          raven-worx
          Moderators
          wrote on 4 Mar 2020, 07:48 last edited by raven-worx 3 Apr 2020, 19:50
          #4

          @cpper
          ok, then there is only the way using QtWebChannel.
          You will need to inject the webchannel bootstrapping JS and your custom JS (which then actually does all the work and sends - for example the innerHTML property of a DOM element back to your C++ class via the webchannel)

          There are already some examples here in the forum, how to bootstap QtWebChannel

          QWebEnginePage* page = ...
          QWebChannel* myChannel = new QWebChannel(page);
          page->setWebChannel(channel);
          channel->registerObject( "myCppObj", myCppObj); // myCppObj should be an QObject with properties and invokable methods
          
          // make sure qwebchannel.js is executed, or automatically injected for all sites
          
          // -> load page
          

          For automatic injection of JS code see here: https://lists.qt-project.org/pipermail/qtwebengine/2016-March/000338.html

          const char s_qWebChannelAdditionalScript[] = "new
          QWebChannel(qt.webChannelTransport, function(channel) {"
                                                       "  window.exported_object =
          channel.objects.exported_object;"
                                                       "});";
          
          QWebEngineProfile *WebEngineView::prepareProfile()
          {
              QWebEngineProfile *profile = new QWebEngineProfile("Profile", this);
          
              ...
          
              // Preparing qwebchannel.js for injection
              QFile qWebChannelJsFile(":/qtwebchannel/qwebchannel.js");
          
              if(! qWebChannelJsFile.open(QIODevice::ReadOnly)) {
                  MY_ERROR("Failed to load qwebchannel.js with error: " +
          qWebChannelJsFile.errorString());
              } else {
                  QByteArray qWebChannelJs = qWebChannelJsFile.readAll();
          
                  qWebChannelJs.append(QString(s_qWebChannelAdditionalScript));
          
                  QWebEngineScript script;
          
                  script.setSourceCode(qWebChannelJs);
                  script.setName("qwebchannel.js");
                  script.setWorldId(QWebEngineScript::MainWorld);
                  script.setInjectionPoint(QWebEngineScript::DocumentCreation);
                  script.setRunsOnSubFrames(false);
          
                  profile->scripts()->insert(script);
              }
          
              return profile;
          }
          

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          J 1 Reply Last reply 4 Mar 2020, 08:37
          1
          • R raven-worx
            4 Mar 2020, 07:48

            @cpper
            ok, then there is only the way using QtWebChannel.
            You will need to inject the webchannel bootstrapping JS and your custom JS (which then actually does all the work and sends - for example the innerHTML property of a DOM element back to your C++ class via the webchannel)

            There are already some examples here in the forum, how to bootstap QtWebChannel

            QWebEnginePage* page = ...
            QWebChannel* myChannel = new QWebChannel(page);
            page->setWebChannel(channel);
            channel->registerObject( "myCppObj", myCppObj); // myCppObj should be an QObject with properties and invokable methods
            
            // make sure qwebchannel.js is executed, or automatically injected for all sites
            
            // -> load page
            

            For automatic injection of JS code see here: https://lists.qt-project.org/pipermail/qtwebengine/2016-March/000338.html

            const char s_qWebChannelAdditionalScript[] = "new
            QWebChannel(qt.webChannelTransport, function(channel) {"
                                                         "  window.exported_object =
            channel.objects.exported_object;"
                                                         "});";
            
            QWebEngineProfile *WebEngineView::prepareProfile()
            {
                QWebEngineProfile *profile = new QWebEngineProfile("Profile", this);
            
                ...
            
                // Preparing qwebchannel.js for injection
                QFile qWebChannelJsFile(":/qtwebchannel/qwebchannel.js");
            
                if(! qWebChannelJsFile.open(QIODevice::ReadOnly)) {
                    MY_ERROR("Failed to load qwebchannel.js with error: " +
            qWebChannelJsFile.errorString());
                } else {
                    QByteArray qWebChannelJs = qWebChannelJsFile.readAll();
            
                    qWebChannelJs.append(QString(s_qWebChannelAdditionalScript));
            
                    QWebEngineScript script;
            
                    script.setSourceCode(qWebChannelJs);
                    script.setName("qwebchannel.js");
                    script.setWorldId(QWebEngineScript::MainWorld);
                    script.setInjectionPoint(QWebEngineScript::DocumentCreation);
                    script.setRunsOnSubFrames(false);
            
                    profile->scripts()->insert(script);
                }
            
                return profile;
            }
            
            J Offline
            J Offline
            JonB
            wrote on 4 Mar 2020, 08:37 last edited by JonB 3 Apr 2020, 08:38
            #5

            @raven-worx
            May I pick you up on this, as it seems it may be totally germane to an issue I am presently struggling with?

            As briefly as possible. I am about to launch out on an area where we have decided to use QWebEnginePage with JavaScript to offer something (chart drawing from a JS library). Unlike from C++ or PyQt, we are using PySide2 and that does not implement the methods which involve a "callback" from JS code to Qt code, e.g. none of the QWebEnginePage::runJavaScript() overloads which use QWebEngineCallback<const QVariant &> &resultCallback. The PySide2 folks are aware of this missing feature, but have decided to do nothing about it and offer no workaround.

            As I understand it, that means I will be able to push JS stuff to QWebEnginePage OK, but will not be able to read anything back from it, should I need to? Which worries me. Are you saying that if I read up on QWebChannel I will be able to use that to get stuff out from running JS in the page? Thank you.

            R 1 Reply Last reply 4 Mar 2020, 19:47
            0
            • C Offline
              C Offline
              cpper
              wrote on 4 Mar 2020, 13:42 last edited by cpper 3 Apr 2020, 13:42
              #6

              @raven-worx Alright, thanks for the sample code :)

              1 Reply Last reply
              0
              • J JonB
                4 Mar 2020, 08:37

                @raven-worx
                May I pick you up on this, as it seems it may be totally germane to an issue I am presently struggling with?

                As briefly as possible. I am about to launch out on an area where we have decided to use QWebEnginePage with JavaScript to offer something (chart drawing from a JS library). Unlike from C++ or PyQt, we are using PySide2 and that does not implement the methods which involve a "callback" from JS code to Qt code, e.g. none of the QWebEnginePage::runJavaScript() overloads which use QWebEngineCallback<const QVariant &> &resultCallback. The PySide2 folks are aware of this missing feature, but have decided to do nothing about it and offer no workaround.

                As I understand it, that means I will be able to push JS stuff to QWebEnginePage OK, but will not be able to read anything back from it, should I need to? Which worries me. Are you saying that if I read up on QWebChannel I will be able to use that to get stuff out from running JS in the page? Thank you.

                R Offline
                R Offline
                raven-worx
                Moderators
                wrote on 4 Mar 2020, 19:47 last edited by raven-worx 3 Apr 2020, 20:40
                #7

                @JonB said in Inspect element (Html code) using QWebEngineView:

                Are you saying that if I read up on QWebChannel I will be able to use that to get stuff out from running JS in the page? Thank you.

                yes. communication is serialized via QtWebChannel from JS code to C++ code (QObject) and vice versa.
                The JS code then can call invokable methods and access the QObjects properties and connect to its signals. See the examples

                --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                If you have a question please use the forum so others can benefit from the solution in the future

                1 Reply Last reply
                1
                • B Offline
                  B Offline
                  Belfix
                  wrote on 31 Mar 2021, 14:03 last edited by
                  #8

                  Can you provide please a simple code to clear the local storage ?

                  jsulmJ 1 Reply Last reply 31 Mar 2021, 14:05
                  0
                  • B Belfix
                    31 Mar 2021, 14:03

                    Can you provide please a simple code to clear the local storage ?

                    jsulmJ Online
                    jsulmJ Online
                    jsulm
                    Lifetime Qt Champion
                    wrote on 31 Mar 2021, 14:05 last edited by
                    #9

                    @Belfix How is your question related to this thread?

                    https://forum.qt.io/topic/113070/qt-code-of-conduct

                    1 Reply Last reply
                    1

                    • Login

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