CEF：C++ 调用 JavaScript 函数 Demo（VS2013）

最新推荐文章于 2021-08-27 19:25:47 发布

blackwood-cliff

最新推荐文章于 2021-08-27 19:25:47 发布

阅读量3.5k

点赞数

分类专栏： CEF 文章标签： CEF MFC

本文链接：https://blog.csdn.net/blackwoodcliff/article/details/75137460

版权

CEF 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

　　这篇文章在上一篇 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 函数”，完成后的界面如下图：
　　这里写图片描述
　　在“调用 JavaScript 函数”按钮上点击鼠标右键，然后在弹出菜单上点击“添加事件处理程序(A)…”项，打开“事件处理程序向导”窗口。
　　
　　不做任何改动，直接点击 [添加编辑(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 页”，如下图：
　　这里写图片描述
　　点击对话框右下角的 [打开(O)] 按钮，添加 HTML 页面文件。然后会自动打开一个名为 HtmlPage1.html 的文件，如下图：
　　
　　修改文件内容如下：

<!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\Debug 和 D:\CefMfcDemo2\Release 下面。
　　点击菜单 [调试(D)->开始执行(不调试)(H)]，编译并运行程序，运行结果如下图：
　　这里写图片描述