The Qwebview of QT Learning

Before doing the CS architecture, the display chart always does poorly. Only C # has the corresponding components, QT needs to hand-draw or load some plugins. Having done the BS architecture, I know a lot of charting tools, such as echarts, that are very good at the front end. This method was also used in the last big job. Then you know that QT can load qtwebkit, so you can do a hybrid development of web and on-premises applications.

To create a new QT GUI project, remember to choose Qtwebkit and Qnetwork.

Qwebview class

Using the Qwebview class, you can make one of the simplest browsers with just a few lines of code. The main function of Qwebview is to browse the Web, each qwebview contains a qwebpage, and Qwebpage is a class for storing and editing pages.

Here is one of the simplest browsers: main.cpp

#include <QtGui/QApplication>#include <QWebView>#include <QMainWindow>int main(intchar *argv[]){    QApplication a(argc, argv);    QMainWindow window;    QWebView view(&window);    view.setGeometry(00600400);    view.setUrl(QUrl("https://github.com/Mr-Phoebe"));    window.show();    return a.exec();}

Webpage.pro:

TEMPLATE = app  TARGET =   DEPENDPATH += .  INCLUDEPATH += .  CONFIG += qt  QT += webkit  # Input  SOURCES += main.cpp  

Qwebview There are two ways to set the content to be displayed, one is the SetUrl method, and the other is the SetContent method. This is very simple, try it, not much to say.

However, there are two different ways to develop these two approaches:

SetContent words, you need to manually generate the page code into the Qwebview, the Elements of the page (such as: Pictures, styles, scripts) can only adopt the "file:///" way.

SetUrl words, more technical content, you may need to make a simple HTTP server, and then listen to the local port, the Qwebview SetUrl (Qurl (Http://127.0.0.1:XXXX)).

You can use a more convenient method: Just put the HTML you want to display on Apache.

Show it is not difficult, the most important thing is how to interact with the interface two-way, not ASP, can not do without a button to brush a page bar.

The most capacity to think of is traditional web development in the common Ajax, but there are two drawbacks:

One is to listen to the local port, the second is more deadly, Ajax is not bidirectional, and the server sends messages to the client.

Here is a better way to implement the two-way invocation of JS and C + +.

JS Call C + + method

First of all, a C + + object to "send" to JS, JS to get this object can be like other objects, the free way to call it.

This step is implemented in two ways:

1. Insert the control JS side of the Web page

Insert the following snippet of code into your Web page:

<objecttype="application/x-qt-plugin" id="qt"></object>

You can then pass the document.getElementById (' Qt '), get the object, and invoke the method.

C + + END

The first thing to do is to customize a class to inherit from Qwebpage, and add the following sentence to the constructor to open plugin support.

settings()->setAttribute(QWebSettingstrue);

The following method is then overloaded in qwebpage (protected)

virtual QObject *createPlugin(constconstconstconst QStringList &paramValues);

The return value of the method is the object to pass the JS to.

Note: If the return value is a qwidget * type, you may also want to write a widget yourself, and after writing, all the public slots in the returned qwidget are visible in JS.

The example below is a bit long, but it's simple:

MyWidget.h

#ifndef Mywidget_h#define mywidget_h#include <QWidget>#include <QWebPage>#include <QWebFrame>Class Mywidget: PublicQwidget {Q_objectPrivate: Qwebpage *page; Public:Mywidget(Qwebpage *page):page(page) { } PublicSlotsvoid func(QString Arg) { This->page->mainframe ()->evaluatejavascript ("Document.body.innerHTML + = "+ arg +"';"); }};#endif //Mywidget_h

MyPage.h

#ifndef Mypage_h#define mypage_h#include <QWebPage>#include <QWebFrame>#include "MyWidget.h"Class MyPage: PublicQwebpage {Q_object Public:MyPage(Qobject *parent =0): Qwebpage (parent) {settings ()->setattribute (qwebsettings::P luginsenabled,true); }protected: Qobject *Createplugin(ConstQString &classid,ConstQurl &url,ConstQstringlist &paramnames,ConstQstringlist &paramvalues) {return NewMywidget ( This); }};#endif //Mypage_h

Main.cpp

#include <QtGui/QApplication>#include <QMainWindow>#include <QWebView>#include <QWebPage>#include <QWebFrame>#include "MyPage.h"intMainintargcChar*argv[]) {qapplication A (argc, argv);    Qmainwindow window;    Qwebview view (&window);    MyPage page;    View.setpage (&page); View.setgeometry (0,0, -, -);//ObjectQString Content ("<object type= ' application/x-qt-plugin ' height= ' 1 ' width= ' 1 ' id= ' qt ' ></object>");//JS function f (): Invoke the ' func ' functionContent + ="<script>document.getelementbyid (' Qt '). Func (' Https://github.com/Mr-Phoebe ');</script>";    View.setcontent (Content.toascii ()); Window.show ();returnA.exec ();}

2. Using Qwebframe's Addtojavascriptwindowobject method

This method is recommended by individuals compared to the previous method. Because the last encounter with Linux under a very strange problem.

Examples are the best way to explain, so give an example:

Note: The first parameter of Addtojavascriptwindowobject is the variable name of the object in JS, and the qobject of the second parameter is not required to be qwidget.

MyObject.h

#ifndef Myobject_h#define myobject_h#include <QObject>#include <QWebPage>#include <QWebFrame>// !! ATTENTION!! : The object does not need to inherit from Qwidget anymore.Class MyObject: PublicQobject {Q_objectPrivate: Qwebpage *page; Public:MyObject(Qwebpage *page):page(page) { } PublicSlotsvoid func(QString Arg) { This->page->mainframe ()->evaluatejavascript ("Document.body.innerHTML + = "+ arg +"';"); }};#endif //Myobject_h

Main.cpp

#include <QtGui/QApplication>#include <QMainWindow>#include <QWebView>#include <QWebPage>#include <QWebFrame>#include "MyObject.h"intMainintargcChar*argv[]) {qapplication A (argc, argv);    Qmainwindow window;    Qwebview view (&window);    Qwebpage page;    View.setpage (&page); View.setgeometry (0,0, -, -);    MyObject obj (&page); Page.mainframe ()->addtojavascriptwindowobject ("QT", &obj); QString Content ("<script>function f () {Qt.func (' Https://github.com/Mr-Phoebe ');} </script> "); Content + ="<a href= ' javascript:f () ' >click me</a> ';    View.setcontent (Content.toascii ()); Window.show ();returnA.exec ();}

C + + Call JS code

There are still two ways of doing it.

1. Evaluatejavascript

This is super simple, the above example is used. Not much to say.

2. Connect

This is more in line with the QT style. First, use one of the two methods described in the previous section to "send" a C + + object to JS. Then call this object's Connect method, the signals and JS method to bind.

Let's take another example, but the example uses Evaluatejavascript to bind.

When Qwebview is loaded, bind MyObject Miku Signal to JS local method F, and then trigger Miku Signal.

MyObject.h

#ifndef Myobject_h#define myobject_h#include <QObject>#include <QWebPage>#include <QWebFrame>Class MyObject: PublicQobject {Q_objectPrivate: Qwebpage *page; Public:MyObject(Qwebpage *page):page(page) {}signals:voidMiku (); PublicSlotsvoid Viewload() { This->page->mainframe ()->evaluatejavascript ("Qt. Miku.connect (f); "); This->miku (); }};#endif //Myobject_h

Main.cpp

#include <QtGui/QApplication>#include <QMainWindow>#include <QWebView>#include <QWebPage>#include <QWebFrame>#include "MyObject.h"intMainintargcChar*argv[]) {qapplication A (argc, argv);    Qmainwindow window;    Qwebview view (&window);    Qwebpage page;    View.setpage (&page); View.setgeometry (0,0, -, -);    MyObject obj (&page); Qobject::connect (&view, SIGNAL (loadfinished (BOOL)), &obj, SLOT (Viewload ())); Page.mainframe ()->addtojavascriptwindowobject ("QT", &obj); QString Content ("<script>function f () {Document.body.innerHTML + = ' http://pnuts.cc ';} </script> ");    View.setcontent (Content.toascii ()); Window.show ();returnA.exec ();}

The Qwebview of QT Learning