转自:

http://blog.163.com/qimo601@126/blog/static/15822093201682185819623/

Qt 4.8.4

感谢原作者,我只转载。
看看作者如何实现:
1、Qt源码调用html中js的函数disp_messagebox();
2、js源码中如何调用qt中的函数  
MainWindow.jsInvokeQt();
MainWindow.setInfor("Qt change string"); 
alert(MainWindow.getInfor());
 
页面载入完成的信号:
connect(ui.webView->page()->mainFrame(), SIGNAL(loadFinished(bool)),
           
this, SLOT(callFunction()));
 
由于篇幅限制,我就不发头文件了,详细源码可以下载附件QtInvokeJS.zip
#include "mainwindow.h"
#include "ui_mainwindow.h"


MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    /* 载入html网页 */
    m_pWebView = new QWebView();

    m_pWebView->load(QUrl("file:///D:/jsTest.html"));

    m_pWebView->show();

    /* 开启JavaScript支持 */
    QWebSettings *pWebSettings = m_pWebView->page()->settings();

    pWebSettings->setAttribute(QWebSettings::JavascriptEnabled,true);

    /* 窗体布局, 添加按钮 */
    QPushButton *pEventBtn = new QPushButton(tr("QT Invoke JavaScript web page Object"));
    QPushButton *pcloseBtn = new QPushButton(tr("close"));

    /* 布局:网页与按钮为上下布局,两按钮为水平居中布局 */
    QHBoxLayout *pBtnLayout = new QHBoxLayout;

    pBtnLayout->addWidget(pEventBtn);

    pBtnLayout->addWidget(pcloseBtn);

    pBtnLayout->setAlignment(Qt::AlignCenter);

    QVBoxLayout *pMainLayout = new QVBoxLayout;

    pMainLayout->addWidget(m_pWebView);

    pMainLayout->addLayout(pBtnLayout);

    QWidget *widget = new QWidget;

    widget->setLayout(pMainLayout);

    setCentralWidget(widget);

    /* 建立信号与槽, 每次载入html时发送段信号 */
    connect(m_pWebView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),
            this,SLOT(addObjectToJs()));

    connect(pEventBtn,SIGNAL(clicked()),this,SLOT(testJs()));

    connect(pcloseBtn,SIGNAL(clicked()),this,SLOT(close()));

    testStr.clear();
}

MainWindow::~MainWindow()
{
    if(m_pWebView != NULL)
    {
        delete m_pWebView;
        m_pWebView = NULL;
    }

    /* 必须的,否则,在debug编译模式下就会出现leak错误 */
    QWebSettings::globalSettings()->clearMemoryCaches();

    delete ui;
}

/* 这个public slot槽函数是为了响应JavaScript的的invoke的 */
void MainWindow::jsInvokeQt()
{
    qDebug()<<"MainWindow::jsInvokeQt(),\t JavaScript invoke Qt program!";
}

/* 将MainWindows这个类的名称&&对象指针发送给JavaScript */
void MainWindow::addObjectToJs()
{
    m_pWebView->page()->mainFrame()->addToJavaScriptWindowObject("MainWindow",this);
}

/* Qt来 invoke JavaScript里面的disp_messagebox()函数 */
void MainWindow::testJs()
{
    qDebug()<<"MainWindow::testJs(),\t Qt invoke JavaScript's function";
    m_pWebView->page()->mainFrame()->evaluateJavaScript("disp_messagebox()");
}

/* JavaScript invoke Qt里面的public slot 槽函数 */
void MainWindow::setInfor(const QString str)
{
    qDebug()<<"MainWindow::setInfor(const QString str),\t Response of js Invoke!"<<"var is:"<<str;
    if(str.isEmpty())
    {
        qDebug()<<"str is empty!";
        return;
    }
    else
    {
        testStr = str;
    }
}

/* JavaScript invoke Qt里面的public slot 槽函数 */
QString MainWindow::getInfor()
{
    qDebug()<<"MainWindow::GetInfor(),\t "<<testStr;
    return testStr;
}
-----------------------------------------------------------------------------
<html>
 
<head>
 
<script type="text/javascript">
 
function disp_messagebox()
{
    alert("This is javaScript MessageBox come from alert!")
 
function disp_qtmessage()
{
  alert("disp_messagebox function, who is in JavaScript!")
   
  MainWindow.jsInvokeQt();
 
  MainWindow.setInfor("Qt change string"); 
  
  alert(MainWindow.getInfor());
 
</script>
 
</head>
 
<body> 
 
<input type="button" onclick="disp_qtmessage()" value="JavaScript Invoke Qt Object" /> 
 
</body>
 
</html>

QT和JS的互相调用例子的更多相关文章

  1. node源码详解(四) —— js代码如何调用C++的函数

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...

  2. Qt与JS(三)

    Qt不错的学习网址: http://www.cnblogs.com/findumars/p/5529526.html ----------------------------------------- ...

  3. Atitit java c# php c++ js跨语言调用matlab实现边缘检测等功能attilax总结

    Atitit java c# php c++ js跨语言调用matlab实现边缘检测等功能attilax总结 1.1. 边缘检测的基本方法Canny最常用了1 1.2. 编写matlab边缘检测代码, ...

  4. Unity3D中C#和js方法相互调用

    通过查找资料,Unity3D中C#和js要相互调用彼此的方法,js文件必须放在"Standard Assets". "Pro Standard Assets" ...

  5. js函数的调用问题

    1.js函数的调用方式有三种.请问以下“二”处的几行代码有什么猫腻? //一 事件调用 btn.onclick=fn; //二 直接调用(window调用) fn(); //自上而下解析到这一行的时候 ...

  6. iOS js oc相互调用(JavaScriptCore)(二)

    下来我们使用js调用iOS js调用iOS分两种情况 一,js里面直接调用方法 二,js里面通过对象调用方法 首先我们看第一种,直接调用方法. 其中用到了iOS的block 上代码 -(void)we ...

  7. js switch表达式的例子

    switch 这种表达式在很多语言中都有,比如java, C等待, 使用switch比使用if else 来得方便,来得清晰.  前言 switch 这种表达式在很多语言中都有,比如java, C等待 ...

  8. gwt中java与js的相互调用

    1. java通过jsni调用内部js Button button = new Button("java调用内部jsni的js方法"); button.addClickHandle ...

  9. iOS js oc相互调用(JavaScriptCore 下)

    下来我们使用js调用iOS js调用iOS分两种情况 一,js里面直接调用方法 二,js里面通过对象调用方法 首先我们看第一种,直接调用方法. 其中用到了iOS的block 上代码 -(void)we ...

随机推荐

  1. 【BZOJ】2815: [ZJOI2012]灾难

    简要题意: 给一个有向无环图,问每个节点删掉之后会导致多少个点不可达. 似乎以前拿来考过.... 我们定义一棵树,它满足对应点造成的灭绝值即为当点的子树大小-1 按照被捕食者--->捕食者的关系 ...

  2. 不可改变性imutable

    不可改变性是指一些对象在被创建之后不会因为某些方式改变,特别是针对任何可以改变哈希对象的哈希值的方式. 两者相联系是因为哈希键值一定是不可改变的,所以它们对应的哈希键值也不改变. 如果允许它们改变,那 ...

  3. .NetCore Session.Redis

    首先创建ASP.NET CORE Web项目,然后按如下顺序操作.1.添加nuget程序包: Microsoft.AspNetCore.Session; Microsoft.AspNetCore.Da ...

  4. System.out.println 报错: 只能运行在方法体内哦, 类里面只包含属性和方法哦,注意!

    类里面包含属性和方法 所以, System.out.println,只能放在方法体内运行,不能放在类里.方法外哦

  5. 《剑指offer》第四十一题(数据流中的中位数)

    // 面试题41:数据流中的中位数 // 题目:如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么 // 中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值, // ...

  6. velocity.js 动画插件

    1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...

  7. P499 usebrass2

    有两种方式可以实现多态公有继承 1) 在派生类中重新定义基类的方法 2) 使用虚方法 如下是使用虚方法 brass.h #ifndef BRASS_H #define BRASS_H #include ...

  8. chkconfig命令参数

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...

  9. angular2 学习笔记 (Typescript - Attribute & reflection & decorator)

    更新 : 2018-11-27 { date: Date } 之前好像搞错了,这个是可以用 design:type 拿到的 { date: Date | null } 任何类型一但配上了 | 就 de ...

  10. 文献导读 - Machine Learning Identifies Stemness Features Associated with Oncogenic Dedifferentiation

    参考: Machine Learning Identifies Stemness Features Associated with Oncogenic Dedifferentiation 前所未有!1 ...