ios js解析html,andriod/ios webview与js交互 html_demo

测试

Android

• js调用Android：
• Android调用js：javascript:androidCalljs()

IOS

• js发送消息：
• IOS发送消息：bridge.send()
  接收到的信息：

• ---

• js调用IOS：
• IOS调用js：callHandler:iosCalljs

function connectWebViewJavascriptBridge(callback) {

if (window.WebViewJavascriptBridge) {

callback(WebViewJavascriptBridge)

} else {

document.addEventListener('WebViewJavascriptBridgeReady', function () {

callback(WebViewJavascriptBridge)

}, false)

}

}

connectWebViewJavascriptBridge(function (bridge) {

//js接收IOS发送的数据

bridge.init(function (message, responseCallback) {

var t;

if (message) {

t = '接收到数据';

alert(message);

} else { t = '未接收到数据'; }

if (responseCallback) {

responseCallback(t);

}

})

//供IOS调用

window.WebViewJavascriptBridge.registerHandler("iosCalljs", function (data) {

alert('调用js完毕，接收到的数据：' + (data || ''));

})

})

//js向IOS发送数据

function jsSendIOS() {

window.WebViewJavascriptBridge.send(document.getElementById('input2').value, function (data) {

if (data)

alert(data);

})

}

//js调用IOS

function jsCallIOS() {

window.WebViewJavascriptBridge.callHandler(document.getElementById('inputid3').value, document.getElementById('inputid4').value, function (data) {

if (data) alert(data);

})

}

//供安卓调用

function receiveMsg(msg) {

if (msg)

document.getElementById('inputid1').innerHTML = msg;

else

document.getElementById('inputid1').innerHTML = '没有接收到任何数据';

}

//js调用安卓

function jsCallAndroid() {

eval(document.getElementById('inputid1').value);

}

//供安卓调用

function androidCalljs(msg) {

alert('调用js成功！接收到的数据：' + (msg || ''));

}

WebViewJavascriptBridge.js

;(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'

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

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

_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

var responseCallback

if (message.responseId) {

responseCallback = responseCallbacks[message.responseId]

if (!responseCallback) { return; }

responseCallback(message.responseData)

delete responseCallbacks[message.responseId]

} else {

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)

})();

android/ios 参考：https://github.com/marcuswestin/WebViewJavascriptBridge

http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html

wpf webbrowser参考：http://www.cnblogs.com/NotAnEmpty/p/4103649.html