你的位置:首页 > Java教程

[Java教程]andriod/ios webview与js交互 html_demo


<html><head>  <title>测试</title></head><body>  <h3>Android</h3>  <ul >    <li>js调用Android:<input type="button" value="点我调用" onclick="jsCallAndroid();" /> <input id="inputid1" type="text" placeholder="输入函数" /></li>    <li>Android调用js:javascript:androidCalljs()</li>  </ul>  <h3>IOS</h3>  <ul >    <li>js发送消息:<input type="button" value="点我发送消息" onclick="jsSendIOS();" /> <input id="input2" type="text" placeholder="输入发送内容" /></li>    <li>IOS发送消息:bridge.send()<br />接收到的信息:</li>    <li><hr /></li>    <li>js调用IOS:<input type="button" value="点我调用" onclick="jsCallIOS();" /> <input type="text" id="inputid3" placeholder="输入os函数名" /> <input type="text" id="inputid4" placeholder="输入发送内容" /></li>    <li>IOS调用js:callHandler:iosCalljs</li>  </ul><script src="WebViewJavascriptBridge.js"></script>  <script type="text/javascript">    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 || ''));    }  </script></body></html>

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