<!doctype html>

<html><head>

<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>

<script>

window.onerror = function(err) {

log('window.onerror: ' + err)

}

document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false)

function onBridgeReady(event) {

var bridge = event.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 + (data ? ':<br/>' + JSON.stringify(data) : '')

if (log.children.length) { log.insertBefore(el, log.children[0]) }

else { log.appendChild(el) }

}

bridge.init(function(message, responseCallback) {

log('JS got a message', message)

var data = { 'Javascript Responds':'Wee!' }

log('JS responding with', data)

responseCallback(data)

})

bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {

log('ObjC called testJavascriptHandler with', data)

var responseData = { 'Javascript Says':'Right back atcha!' }

log('JS responding with', responseData)

responseCallback(responseData)

})

var button = document.getElementById('buttons').appendChild(document.createElement('button'))

button.innerHTML = 'Send message to ObjC'

button.onclick = function(e) {

e.preventDefault()

var data = 'Hello from JS button'

log('JS sending message', data)

bridge.send(data, function(responseData) {

log('JS got response', responseData)

})

}

document.body.appendChild(document.createElement('br'))

var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))

callbackButton.innerHTML = 'Fire testObjcCallback'

callbackButton.onclick = function(e) {

e.preventDefault()

log('JS calling handler "testObjcCallback"')

bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {

log('JS got response', response)

})

}

}

;(function() {

if (window.WebViewJavascriptBridge) { return }

var messagingIframe

var sendMessageQueue = []

var receiveMessageQueue = []

var messageHandlers = {}

var CUSTOM_PROTOCOL_SCHEME = 'wvjbscheme'

var QUEUE_HAS_MESSAGE = '__WVJB_QUEUE_MESSAGE__'

var responseCallbacks = {}

var uniqueId = 1

function _createQueueReadyIframe(doc) {

messagingIframe = doc.createElement('iframe')

messagingIframe.style.display = 'none'

doc.documentElement.appendChild(messagingIframe)

}

function init(messageHandler) {

if (WebViewJavascriptBridge._messageHandler) { throw new Error('WebViewJavascriptBridge.init called twice') }

WebViewJavascriptBridge._messageHandler = messageHandler

var receivedMessages = receiveMessageQueue

receiveMessageQueue = null

for (var i=0; i<receivedMessages.length; i++) {

_dispatchMessageFromObjC(receivedMessages[i])

}

}

function send(data, responseCallback) {

_doSend({ data:data }, responseCallback)

}

function registerHandler(handlerName, handler) {

messageHandlers[handlerName] = handler

}

function callHandler(handlerName, data, responseCallback) {

_doSend({ handlerName:handlerName, data:data }, responseCallback)

}

function _doSend(message, responseCallback) {

if (responseCallback) {

var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime()

responseCallbacks[callbackId] = responseCallback

message['callbackId'] = callbackId

}

sendMessageQueue.push(message)

messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE

}

function _fetchQueue() {

var messageQueueString = JSON.stringify(sendMessageQueue)

sendMessageQueue = []

return messageQueueString

}

function _dispatchMessageFromObjC(messageJSON) {

setTimeout(function _timeoutDispatchMessageFromObjC() {

var message = JSON.parse(messageJSON)

var messageHandler

if (message.responseId) {

var responseCallback = responseCallbacks[message.responseId]

if (!responseCallback) { return; }

responseCallback(message.responseData)

delete responseCallbacks[message.responseId]

} else {

var responseCallback

if (message.callbackId) {

var callbackResponseId = message.callbackId

responseCallback = function(responseData) {

_doSend({ responseId:callbackResponseId, responseData:responseData })

}

}

var handler = WebViewJavascriptBridge._messageHandler

if (message.handlerName) {

handler = messageHandlers[message.handlerName]

}

try {

handler(message.data, responseCallback)

} catch(exception) {

if (typeof console != 'undefined') {

console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception)

}

}

}

})

}

function _handleMessageFromObjC(messageJSON) {

if (receiveMessageQueue) {

receiveMessageQueue.push(messageJSON)

} else {

_dispatchMessageFromObjC(messageJSON)

}

}

window.WebViewJavascriptBridge = {

init: init,

send: send,

registerHandler: registerHandler,

callHandler: callHandler,

_fetchQueue: _fetchQueue,

_handleMessageFromObjC: _handleMessageFromObjC

}

var doc = document

_createQueueReadyIframe(doc)

var readyEvent = doc.createEvent('Events')

readyEvent.initEvent('WebViewJavascriptBridgeReady')

readyEvent.bridge = WebViewJavascriptBridge

doc.dispatchEvent(readyEvent)

})();

</script>

</body></html>