怎么在qt中加载js脚本，谢谢

2023-02-19 15:55:02JavaScript07

怎么在qt中加载js脚本，谢谢,第1张

使用Webkit library (可以说是纯QT实现)

代码量不多，直接贴代码 (读起来一点不痛苦的) ：

myWebView = new QWebView(this)//this 是main window widget, myWebView 是它的成员变量

myWebView->page()->settings()->setAttribute(QWebSettings::JavascriptEnabled, true)

myWebView->page()->settings()->setAttribute(QWebSettings::PluginsEnabled,true)

myWebView->page()->mainFrame()->addToJavaScriptWindowObject("mainWindowObject", this)//html页面中，可以通过"mainWindowObject"这个对象名访问主控件中的方法 (slot)

setCentralWidget(myWebView)

myWebView->setUrl( xxx )//xxx是你的url或本地html路径

//. . .

class MainWindow : public QMainWindow

{

//. . .

public slots:

void CPlusPlusFunction(const QString&str) //这个函数是将被JavaScript调用的

{

myWebView->page()->mainFrame()->uateJavaScript( QObject::tr("jsFunction('Popup Dialog')") )

}

HTML文件内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>myjstest</title>

function jsFunction(values) //this function will be called from C++ codes

{

alert(values)

}

function test()

{

mainWindowObject.CPlusPlusFunction( "calling C++ function from javaScript" )

}

</script>

</head>

<body>

</form>

</body>

</html>

这种方法，使用Webkit作为浏览器，如果你的页面使用了ActiveX控件（比如google earth插件），则不能正常工作。

这种情况下，你需要放弃Webkit，在主程序中调用IE 控件（WebBrowser Control）作为浏览器。(但是这样也失去了跨平台的支持，因为IE只能在Wndosw上跑。)

上一节中，我们完成了CEF各基本组件的封装，并完成了浏览器基本功能的实现。 >>点这里回顾上节内容

本节我们将尝试扩展所实现的各组件，实现浏览器与页面的双向通信。

本篇的小目标：

上一节曾提到过，CEF应用在默认情况下包含很多子进程，这些进程会共享同一个执行入口。除了主进程的各类处理接口外，CEF还提供了各类子进程的处理接口。而 页面到浏览器的消息通道 就可以借助对 渲染进程 的控制来实现，整体流程如下：

完成上述步骤后，在页面调用对应的消息通道函数时，V8处理器则会相应地进行处理，从而完成消息的发送。

另一方面，实现 浏览器到页面 的消息通道和第二节中基于Qt WebEngine的方法类似，CEF也提供了执行JS脚本的方法，只需在页面中定义好对应的消息接口，并通过执行脚本方法执行该接口即可完成消息的发送。

因此，实现双向通道主要的问题集中在针对渲染进程处理和JS脚本执行的扩展上。接下来先就渲染进程处理进行说明。

为了实现对渲染进程的处理，我们首先需要向上一节中封装的QCefContext中添加对渲染进程入口的解析和处理。具体实现如下：

上面的实现除了处理了CEF主进程外，还判断了子进程是否为渲染进程（Windows环境下的renderer进程和Linux环境下的zygote进程），如果发现当前处理的是渲染进程，则创建一个渲染进程处理器QCefRenderHandler的实例。QCefRenderHandler的声明如下：

和主进程CefApp的实现类似，这里也实现了CefApp接口，此外额外实现了CefRenderProcessHandler接口的OnContextCreated方法，来获取V8上下文的引用，具体实现如下：

上面的实现将sendMessage函数定义为消息通道，并注册到了window对象上。sendMessage函数的具体实现则放在v8Handler的实现中。QCefV8Handler声明如下：

QCefV8Handler通过实现CEF V8处理器的Execute执行方法，完成对所加载的JS函数的过滤，并进行相应的处理，实现如下：

这里首先对函数名和参数进行了校验，之后调用CefBrowser的IPC方法SendProcessMessage向主进程的CefClient发送消息，从而完成页面向浏览器主进程消息的传递。

要实现页面到浏览器的消息通道，除了完成了上面渲染进程的控制扩展，我们还需要在QCefClient中添加接收IPC消息的接口实现。首先在QCefClient头文件中声明对CefClient接口的重载：

然后实现这个接口，完成消息的接收处理：

可以看到这里只是对收到的消息进行了简单的转换，并通过信号发送给感兴趣的下游控件使用。在第四小节的实现中，我们将QCefClient封装到了QCefView中，因此在QCefView中也需要将这个信号转发给它的下游控件：

这样，QCefView接收JS消息的通道就实现完成了。

这里额外讲解一下有关js alert的特殊处理。要实现js调用alert方法时的弹窗提醒，需要额外在CefClient中实现CefJSDialogHandler接口的OnJSDialog方法，参考实现如下：

承前所述，浏览器到页面的消息发送通过CEF的JS脚本执行接口实现。首先在QCefView中，声明并实现一个执行JS脚本的方法：

然后指定一个特定的JS方法，作为消息通道使用：

如此，QCefView发送JS的通道也实现完成了。

完成了消息通道的实现，接下来我们实际使用一下我们定义好的消息通道。

首先是Qt端的实现，在MainDlg的initWebView方法中，添加对JS消息的监听，并将监听到的消息通过QMessageBox显示出来：

然后添加文本输入和发送按钮，并在按钮点击信号对应的槽中调用QCefView的消息发送方法：

接下来在页面端实现消息接收和发送的接口msgutils.js：

可以看到这里我们使用了上面定义的recvMessage和sendMessage两个函数。然后在页面上调用这些接口：

实际运行一下浏览器，并加载我们实现的这个页面，消息发送效果如下：

有关CEF消息通道的讲解就先进行到这里。下一节将分析使用CEF接口实现Https双向认证的方法。

>>返回系列索引

[1] Chromium Embedded Framework官网

[2] Chromium Embedded Framework官方教程

一、QT简介

Qt是一个跨平台的C++图形用户界面库,.由挪威TrollTech公司出品，目前包括Qt/X11，基于Frambuffer的Qt Embedded,快速开发工具Qt Designer几国际化工具Qt Linguist等．Qt支持Unix及Linux系统,还支持 Windows NT/Windows 2k及Qindows 95/98平台.Qt的良好封装机制使其模块化程度非常高,可重用性较好.

Qt/Embeded是面向嵌入式系统的Qt版本，是Qt的嵌入式Linux窗口，是完整的自包含C++ GUI和基于Linux的嵌入式品台开发工具。Qt/Embeded　API可用于多种开发项目。许多基于Qt的X　Window程序可以非常方便地移植到嵌入式版本。

下面我们就从实际应用中认识Qt.

二、在终端下编写Qt程序

我们先要介绍在终端窗口编写Qt程序．

打开一个终端，建立一个文件夹，如：mkdir hello

然后进入这个文件夹：cd hello

创建c++文件，vi hello.cpp

在文件中键入下面的代码：

#include <qapplication.h>

#include <qlabel.h>

int main(int argc,char *argv[])

{

QApplication app(argc,argv)

QLabel *label=new QLabel("Hello Qt!",0)

app.setMainWidget(label)

label->show()

return app.exec()

}

然后我们用qt的工具qmake来生成工程文件：

qmake -project

大家可以用ls查看一下，是不是多了一个名为hello.pro的工程文件．

接下来是生成Makefile文件：

qmake hello.pro

呵呵，ls一下，Makefile终于看到你的.

接下来就是make了，等上一段时间．

运行程序./hello

下面是界面：

下面我们来讲解上面的程序：

#include <qapplication.h>

这一行包含了QApplication类的定义。在每一个使用Qt的应用程序中都必须使用一个QApplication对象。QApplication管理了各种各样的应用程序的广泛资源，比如默认的字体和光标。

#include <qpushbutton.h>

这一行包含了QPushButton类的定义。参考文档的文件的最上部分提到了使用哪个类就必须包含哪个头文件的说明。

QPushButton是一个经典的图形用户界面按钮，用户可以按下去，也可以放开。它管理自己的观感，就像其它每一个QWidget。一个窗口部件就是一个可以处理用户输入和绘制图形的用户界面对象。程序员可以改变它的全部观感和它的许多主要的属性（比如颜色），还有这个窗口部件的内容。一个QPushButton可以显示一段文本或者一个QPixmap。

int main( int argc, char **argv )

main()函数是程序的入口。几乎在使用Qt的所有情况下，main()只需要在把控制转交给Qt库之前执行一些初始化，然后Qt库通过事件来向程序告知用户的行为。

argc是命令行变量的数量，argv是命令行变量的数组。这是一个C/C++特征。它不是Qt专有的，无论如何Qt需要处理这些变量（请看下面）。

QApplication a( argc, argv )

a是这个程序的QApplication。它在这里被创建并且处理这些命令行变量．在任何Qt的窗口系统部件被使用之前创建QApplication对象是必须的。

QPushButton hello( "Hello world!", 0 )

这里，在QApplication之后，接着的是第一个窗口系统代码：一个按钮被创建了。

这个按钮被设置成显示“Hello world!”并且它自己构成了一个窗口（因为在构造函数指定0为它的父窗口，在这个父窗口中按钮被定位）。

hello.resize( 100, 30 )

这个按酒被设置成100像素宽，30像素高（加上窗口系统边框）。在这种情况下，我们不用考虑按钮的位置，并且我们接受默认值。

a.setMainWidget( &hello )

这个按钮被选为这个应用程序的主窗口部件。如果用户关闭了主窗口部件，应用程序就退出了。