hiXing/WebViewJavascriptBridge

语言: JavaScript

git: https://github.com/hiXing/WebViewJavascriptBridge

WebViewJavascript Native app 和 webview 交互
WebViewJavascript Native app 和 webview 交互
README.md (中文)

WebViewJavascriptBridge

用于HTML / Android / Chrome扩展的跨平台WebViewJavascriptBridge,与WebViewJavascriptBridge兼容的javascript界面

ALL:

  • 使用队列,在客户端和服务器都联合之前缓存消息。
  • 使用长期连接而不是简单的一次性请求消息传递

Android的

要在Android项目中使用WebViewJavascriptBridge,请执行以下操作:

1)在项目中添加“res / raw / webviewjavascriptbridge.js”和“com / fangjian / WebViewJavascriptBridge.java”

2)设置Android端

bridge=new WebViewJavascriptBridge(this.getApplicationContext(),webView,new UserServerHandler()) ;

class UserServerHandler implements WebViewJavascriptBridge.WVJBHandler{
        @Override
        public void handle(String data, WebViewJavascriptBridge.WVJBResponseCallback jsCallback) {
            Log.d("test","Received message from javascript: "+ data);
            if (null !=jsCallback) {
                jsCallback.callback("Java said:Right back atcha");
            }
            bridge.send("I expect a response!",new WebViewJavascriptBridge.WVJBResponseCallback() {
                @Override
                public void callback(String responseData) {
                    Log.d("test","Got response! "+responseData);
                }
            });
            bridge.send("Hi");
        }
    }

bridge.registerHandler("handler1",new WebViewJavascriptBridge.WVJBHandler() {
    @Override
    public void handle(String data, WebViewJavascriptBridge.WVJBResponseCallback jsCallback) {
         Log.d("test","handler1 got:"+data);
        if(null!=jsCallback){
            jsCallback.callback("handler1 answer");
        }
        bridge.callHandler("showAlert","42");
    }
});

3)设置Javascript端

console.log("user_client.js called!");
document.addEventListener('WebViewJavascriptBridgeReady'
, function(event) {
var bridge=event.bridge;
bridge.init(function(message, responseCallback) {
     if (responseCallback) {
     responseCallback("Right back atcha") ;
     }
}) ;
bridge.send('Hello from the javascript');
bridge.send('Please respond to this', function(responseData) {
    console.log("Javascript got its response "+ responseData);
});
bridge.registerHandler("showAlert", function(data) { console.log("alert:"+data); });
bridge.callHandler("handler1","gift for handler1",function(responseData){
    console.log("got handler1 response:"+responseData);
});
}, false)

要在Chrome扩展程序中使用WebViewJavascriptBridge,请执行以下操作:

1)将“bridgeClientChrome.js”和“bridgeServerChrome.js”添加到manifest.json中

"content_scripts": [
    {
    "matches": ["*://*/*"],
    "js": ["user_client.js","bridgeClientChrome.js"]
    }
],
"background": {
    "scripts": ["bridgeServerChrome.js","user_server.js"]
},

2)设置背景面:

console.log("user_server.js called!");
bridge.sinit(function(data,responseCallback){
    console.log("Received message from javascript: "+data);
    responseCallback("Right back atcha");
})

bridge.ssend("Well hello there");
bridge.ssend("Give me a response, will you?", function(responseData) {
    console.log("Background got its response! "+responseData);
})

3)设置前台端:

console.log("user_client.js called!");
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) {
    var bridge = event.bridge
    bridge.init(function(message, responseCallback) {
        alert('Received message: ' + message)   
        if (responseCallback) {
            responseCallback("Right back atcha")
        }
    })
    bridge.send('Hello from the javascript')
    bridge.send('Please respond to this', function responseCallback(responseData) {
        console.log("Javascript got its response", responseData)
    })
}, false)

HTML

要在HTML页面中使用WebViewJavascriptBridge,请执行以下操作: 1)将“bridgeServerHtml.js”和“bridgeClientHtml.js”添加到您的页面。 bridgeServerHtml.js必须是第一个并且bridgeClientHtml.js必须是最后一个。

<script src="bridgeServerHtml.js"></script> <!--muse be first -->
<script src="user_client.js"></script> 
<script src="user_server.js"></script> 
<script src="bridgeClientHtml.js"></script>  <!--muse be last -->

2)设置背景面:

console.log("user_server.js called!");
bridge.sinit(function(data,responseCallback){
    console.log("Received message from javascript: "+data);
    if(responseCallback){
        responseCallback("Right back atcha");
    }
})
function serverSend(){
    bridge.ssend("Well hello there");
    bridge.ssend("Give me a response, will you?", function(responseData) {
        console.log("Background got its response! "+responseData);
    })
}
setTimeout(serverSend,1000);

3)设置前台端:

console.log("user_client.js called!");
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) {
    var bridge = event.bridge
    bridge.init(function(message, responseCallback) {
        alert('Received message: ' + message)   
        if (responseCallback) {
            responseCallback("Right back atcha")
        }
    })
    bridge.send('Hello from the javascript')
    bridge.send('Please respond to this', function responseCallback(responseData) {
        console.log("Javascript got its response", responseData)
    })
}, false)

IOS

用于在UIWebViews / WebViews中在Obj-C和JavaScript之间发送消息的iOS / OSX桥。

从marcuswestin / WebViewJavascriptBridge分叉。

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

WebViewJavascriptBridge

Cross-platform WebViewJavascriptBridge for HTML/Android/Chrome Extension, the javascript interface compatible with WebViewJavascriptBridge

TODO:

  • Use the queue ,cache the message before the client and server both inited.
  • Use the Long-lived connections instead of the Simple one-time requests, Message Passing

Android

To use a WebViewJavascriptBridge in your Android project:

1) Add "res/raw/webviewjavascriptbridge.js" and "com/fangjian/WebViewJavascriptBridge.java" to your project

2) Set up the Android side

bridge=new WebViewJavascriptBridge(this.getApplicationContext(),webView,new UserServerHandler()) ;

class UserServerHandler implements WebViewJavascriptBridge.WVJBHandler{
        @Override
        public void handle(String data, WebViewJavascriptBridge.WVJBResponseCallback jsCallback) {
            Log.d("test","Received message from javascript: "+ data);
            if (null !=jsCallback) {
                jsCallback.callback("Java said:Right back atcha");
            }
            bridge.send("I expect a response!",new WebViewJavascriptBridge.WVJBResponseCallback() {
                @Override
                public void callback(String responseData) {
                    Log.d("test","Got response! "+responseData);
                }
            });
            bridge.send("Hi");
        }
    }

bridge.registerHandler("handler1",new WebViewJavascriptBridge.WVJBHandler() {
    @Override
    public void handle(String data, WebViewJavascriptBridge.WVJBResponseCallback jsCallback) {
         Log.d("test","handler1 got:"+data);
        if(null!=jsCallback){
            jsCallback.callback("handler1 answer");
        }
        bridge.callHandler("showAlert","42");
    }
});

3) Set up the Javascript side

console.log("user_client.js called!");
document.addEventListener('WebViewJavascriptBridgeReady'
, function(event) {
var bridge=event.bridge;
bridge.init(function(message, responseCallback) {
     if (responseCallback) {
     responseCallback("Right back atcha") ;
     }
}) ;
bridge.send('Hello from the javascript');
bridge.send('Please respond to this', function(responseData) {
    console.log("Javascript got its response "+ responseData);
});
bridge.registerHandler("showAlert", function(data) { console.log("alert:"+data); });
bridge.callHandler("handler1","gift for handler1",function(responseData){
    console.log("got handler1 response:"+responseData);
});
}, false)

Chrome

To use a WebViewJavascriptBridge in your chrome extension:

1) Add "bridgeClientChrome.js" and "bridgeServerChrome.js" to your manifest.json

"content_scripts": [
    {
    "matches": ["*://*/*"],
    "js": ["user_client.js","bridgeClientChrome.js"]
    }
],
"background": {
    "scripts": ["bridgeServerChrome.js","user_server.js"]
},

2) Set up the background side:

console.log("user_server.js called!");
bridge.sinit(function(data,responseCallback){
    console.log("Received message from javascript: "+data);
    responseCallback("Right back atcha");
})

bridge.ssend("Well hello there");
bridge.ssend("Give me a response, will you?", function(responseData) {
    console.log("Background got its response! "+responseData);
})

3) Set up the foreground side:

console.log("user_client.js called!");
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) {
    var bridge = event.bridge
    bridge.init(function(message, responseCallback) {
        alert('Received message: ' + message)   
        if (responseCallback) {
            responseCallback("Right back atcha")
        }
    })
    bridge.send('Hello from the javascript')
    bridge.send('Please respond to this', function responseCallback(responseData) {
        console.log("Javascript got its response", responseData)
    })
}, false)

HTML

To use a WebViewJavascriptBridge in your HTML page:
1) Add "bridgeServerHtml.js" and "bridgeClientHtml.js" to your page. bridgeServerHtml.js Must be first and bridgeClientHtml.js Must be last.

<script src="bridgeServerHtml.js"></script> <!--muse be first -->
<script src="user_client.js"></script> 
<script src="user_server.js"></script> 
<script src="bridgeClientHtml.js"></script>  <!--muse be last -->

2) Set up the background side:

console.log("user_server.js called!");
bridge.sinit(function(data,responseCallback){
    console.log("Received message from javascript: "+data);
    if(responseCallback){
        responseCallback("Right back atcha");
    }
})
function serverSend(){
    bridge.ssend("Well hello there");
    bridge.ssend("Give me a response, will you?", function(responseData) {
        console.log("Background got its response! "+responseData);
    })
}
setTimeout(serverSend,1000);

3) Set up the foreground side:

console.log("user_client.js called!");
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) {
    var bridge = event.bridge
    bridge.init(function(message, responseCallback) {
        alert('Received message: ' + message)   
        if (responseCallback) {
            responseCallback("Right back atcha")
        }
    })
    bridge.send('Hello from the javascript')
    bridge.send('Please respond to this', function responseCallback(responseData) {
        console.log("Javascript got its response", responseData)
    })
}, false)

IOS

An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews.

forked from marcuswestin/WebViewJavascriptBridge.