Jcef 例子4_JCEF中js与java交互、js与java相互调用

boyanx3个月前 (09-17)技术教程14

调用jcef核心代码

CefMessageRouter msgRouter = CefMessageRouter.create(new CefMessageRouter.CefMessageRouterConfig(
"csh_Query",// 定义方法
"csh_QueryCancel"// 定义取消方法
));
// 向消息路由器添加一个处理器，第二个参数为true表示这个处理器是主处理器。
msgRouter.addHandler(new CshJcefJsBridgeHandlerDemo(), true);
// 将配置好的消息路由器添加到CEF客户端中，以便它可以开始处理来自JavaScript的调用。
client_.addMessageRouter(msgRouter);

CshJcefJsBridgeHandlerDemo

收到js调用，直接返回反转后的文字，并调用js弹出提示信息：

package com.virhuiai.JBCefBrowser.handler;

import org.cef.browser.CefBrowser;
import org.cef.browser.CefFrame;
import org.cef.callback.CefQueryCallback;
import org.cef.handler.CefMessageRouterHandlerAdapter;

public class CshJcefJsBridgeHandlerDemo extends CefMessageRouterHandlerAdapter {
    @Override
    public boolean onQuery(CefBrowser browser, CefFrame frame, long query_id, String request,
                           boolean persistent, CefQueryCallback callback) {

        // 返回影响成功的数据
        callback.success(new StringBuilder(request).reverse().toString());
        browser.executeJavaScript("alert('成功接收到js的调用')",null,1);// 调用js中定义的方法

        return true;

    }
}

html文件

核心就是调用：

window.csh_Query({...});// 方法名是在上面jcef中设置的，接着用jcef打开html文件。

启动后，根据url参数取得方法名，调用用之

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试打开静态文件</title>
</head>
<body>
    <h1>测试sendMessage2Java</h1>

    <button onclick="globalVar.f.sendMessage2Java('sendMessage2JavaTest')">sendMessage2Java</button>

    <script>
        var globalVar = globalVar || {};
        globalVar.f = globalVar.f || {}
        globalVar.v = globalVar.v || {}

        globalVar.v.fieldNm_fQuery = 'fQuery';
        globalVar.v.fieldNm_fQueryCancel = 'fQueryCancel';

        globalVar.f.parseUrlParamObj = function(){
            // 1. 获取URL中的所有参数
            const urlSearchParams = new URLSearchParams(window.location.search);
            // 2. 定义一个空对象来存储参数
            const params = {};
            // 3. 遍历参数并将其添加到对象中
            for (const [key, value] of urlSearchParams.entries()) {
                params[key] = value;
            }
            // 4. 返回参数对象
            return params;
        }

        const urlParamObj = globalVar.f.parseUrlParamObj();
        if(urlParamObj.hasOwnProperty(globalVar.v.fieldNm_fQuery)){
            urlParamObj[globalVar.v.fieldNm_fQuery];
        }else{
            throw new Error("未找到参数【" + globalVar.v.fieldNm_fQuery + "】");
        }

        if(urlParamObj.hasOwnProperty(globalVar.v.fieldNm_fQueryCancel)){
            urlParamObj[globalVar.v.fieldNm_fQueryCancel];
        }else{
            throw new Error("未找到参数【" + globalVar.v.fieldNm_fQueryCancel + "】");
        }

        globalVar.f.sendMessage2Java = function(request){
            // 即 window.csh_Query({...})
            window[urlParamObj[globalVar.v.fieldNm_fQuery]]({
                request: request,
                onSuccess: function(response) {
                    alert("onSuccess:" + response);
                    globalVar.v.sendMessage2Java_response_onSuccess = response;
                },
                onFailure: function(error_code, error_message) {
                    alert("error_code:" + error_code);
                    alert("error_message:" + error_message);
                    globalVar.v.sendMessage2Java_error_code = error_code;
                    globalVar.v.sendMessage2Java_error_message = error_message;
                }
            });
        }


    </script>
</body>
</html>

示例如图：

标签: js弹窗