<!doctype html>
<html><head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head><body>
<h1>WebViewJavascriptBridge Demo</h1>
<div id="buttons"></div>
<div id="log"></div>
<button id="button-ios">(JS調OC方法) testObjcCallback</button>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
};
//給WebViewJavascriptBridgeReady事件註冊一個Listener
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1;
function log(message, data) {//日誌記錄
var log = document.getElementById('log');
var el = document.createElement('div');
el.className = 'logLine';
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data);
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}
//初始化操作，並定義默認的消息處理邏輯
bridge.init(function(message, responseCallback) {
var data = { 'Javascript Responds':'Wee!' };
responseCallback(data)
});
//註冊一個名爲testJavascriptHandler的處理器，並定義用於響應的處理邏輯
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!' };
responseCallback(responseData)
});
//創建一個發送消息給native端的按鈕
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = '發送消息給native端';
button.onclick = function(e) {
e.preventDefault();
var data = '你好native端，消息來自JS端按鈕';
log('開始發送', data);
bridge.send(data, function(responseData) {
log('發送完成', responseData)
})
};
document.body.appendChild(document.createElement('br'));
//var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'));
//callbackButton.innerHTML = '(JS調OC方法) testObjcCallback';
var callbackButton = document.getElementById('button-ios');
callbackButton.onclick = function(e) {
e.preventDefault();
log('執行回調');
//調用名爲testObjcCallback的native端處理器，並傳遞參數，同時設置回調處理邏輯
bridge.callHandler('testObjcCallback', {'name': 'congcocng'}, function(response) {
log('回調完成', response)
})
}
})
</script>
</body>
</html>
WebViewJavascriptBridge Demo （js與native之間的數據互動）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章