CEF:C++ 调用 JavaScript 函数 Demo(VS2013)

时间:2022-09-22 09:07:44

  这篇文章在上一篇 CEF:MFC 对话框 Demo(VS2013) 的基础上演示一下 C++ 如何调用浏览器页面中的 JavaScript 函数,暨如何向 Web 页面传递数据。

创建 CEF 项目

  参照 CEF:MFC 对话框 Demo(VS2013) 编写一个 MFC 对话框程序。注意:最后一步“添加网址输入框”不需要做。

添加输入框和按钮

  点击菜单 [视图(V)->其他窗口(E)->资源视图(R)],打开“资源视图”窗口,依次展开“CefMfcDemo->CefMfcDemo.rc->Dialog”节点,双击 IDD_CEFMFCDEMO_DIALOG,打开对话框界面编辑窗口。
  在对话框顶部添加一个 Edit Control 和一个 Button,修改 Edit Control 的 ID 为 IDC_EDIT_INFO,修改 Button 的 ID 为 IDC_BTN_CALL,修改 Button 的 Caption 为“调用 JavaScript 函数”,完成后的界面如下图:
  CEF:C++ 调用 JavaScript 函数 Demo(VS2013)
  在“调用 JavaScript 函数”按钮上点击鼠标右键,然后在弹出菜单上点击“添加事件处理程序(A)…”项,打开“事件处理程序向导”窗口。
  CEF:C++ 调用 JavaScript 函数 Demo(VS2013)
  不做任何改动,直接点击 [添加编辑(A)] 按钮,然后光标会自动定位到刚添加的 OnBnClickedBtnCall() 函数上,在函数里添加如下代码:

    CString strInfo;
GetDlgItem(IDC_EDIT_INFO)->GetWindowText(strInfo);
if (strInfo.Trim().IsEmpty())
{
AfxMessageBox(_T("请输入要传递给网页的数据!"));
return;
}

strInfo.Format(_T("ShowCppInfo('%s');"), strInfo);

if (m_simpleClient.get()){
CefRefPtr<CefBrowser> cefBrowser = m_simpleClient->GetBrowser();
CefRefPtr<CefFrame> cefFrame = cefBrowser->GetMainFrame();
if (cefFrame)
{
cefFrame->ExecuteJavaScript(CefString(strInfo), cefFrame->GetURL(), 0);
}
}

  这里指定要调用网页中名为 ShowCppInfo 的 JavaScript 函数。

添加测试网页

  点击菜单 [文件(F)->新建(N)->文件(F)…],打开“新建文件”对话框,在左侧选择 [已安装->Web],然后在中间选中“HTML 页”,如下图:
  CEF:C++ 调用 JavaScript 函数 Demo(VS2013)
  点击对话框右下角的 [打开(O)] 按钮,添加 HTML 页面文件。然后会自动打开一个名为 HtmlPage1.html 的文件,如下图:
  CEF:C++ 调用 JavaScript 函数 Demo(VS2013)
  修改文件内容如下:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>C++ 调用 JavaScript 函数</title>

<script>
function ShowCppInfo(info) {
document.getElementById("txtInfo").value = info;
alert("这是 C++ 发来的数据:" + info);
}
</script>
</head>
<body>
<input id="txtInfo" type="text" />
</body>
</html>

  注意,这里的 JavaScript 函数名及函数声明应该与刚才 C++ 代码里要调用的函数名及参数个数一致。
  修改完毕后,点击工具栏中的“保存”按钮,此时会打开“另存文件为”对话框,保持默认文件名不变,将文件保存到 D:\CefMfcDemo2 目录下。

设置默认打开的网页

  打开 CefMfcDemoDlg.cpp 文件,找到 OnInitDialog() 函数。在 CefBrowserSettings browserSettings; 行上面添加如下代码:

    CString strPath;
GetModuleFileName(NULL, strPath.GetBufferSetLength(MAX_PATH + 1), MAX_PATH);
strPath.ReleaseBuffer();
int pos = strPath.ReverseFind('\\');
strPath = strPath.Left(pos);

CString strUrl = _T("file:///") + strPath + _T("/HtmlPage1.html");

  然后再将 CefBrowserHost::CreateBrowser(winInfo, client, _T("http://www.baidu.com"), browserSettings, NULL); 修改为 CefBrowserHost::CreateBrowser(winInfo, client, CefString(strUrl), browserSettings, NULL);

编译运行程序

  运行程序之前,先把刚才添加的网页从 D:\CefMfcDemo2\HtmlPage1.html 复制到 D:\CefMfcDemo2\DebugD:\CefMfcDemo2\Release 下面。
  点击菜单 [调试(D)->开始执行(不调试)(H)],编译并运行程序,运行结果如下图:
  CEF:C++ 调用 JavaScript 函数 Demo(VS2013)

参考:CEF3开发者系列之JS与C++交互之二
   MFC使用CEF并实现js与C++交互功能

源码下载:http://download.csdn.net/detail/blackwoodcliff/9910559