如何在Web前端开发中通过js在客户端Web视图中调用自定义方法

在前端开发项目中，您经常遇到js代码调用客户端的方法. js如何调用本机客户端的方法？

实现的原理非常简单，就是使用客户端webview的WebViewJavascriptBridge对象的callHandler方法和registerHandler方法进行数据传输，其中callHander用于js调用客户端方法js 调用客户端软件js 调用客户端软件，registerHandler是用于调用客户端调用js方法. 方法如下:

function setupWebViewJavascriptBridge(callback) { //定义一个setupWebViewJavascriptBridge函数
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge) // 向参数中传递WebViewJavascriptBridge全局对象
    } else {
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [ callback ];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'weizhujsb://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }
}
setupWebViewJavascriptBridge(function(bridge) { // 调用setupWebViewJavascriptBridge函数，参数接受WebViewJavascriptBridge全局对象
    function openUserProfile(userId) {
        bridge.callHandler('onPageSkip', { //调用bridge的属性属性方法
            'pageName' : 'profile',
            'data' : {
                'userId' : userId
                 }
            }, function(response) {             
    });
}

广告

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-248505-1.html