andriod/ios webview与js交互 html_demo

<html>
<head>
    <title>测试</title>
</head>
<body>
    <h3>Android</h3>
    <ul style="list-style:none;line-height:50px;">
        <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 style="list-style:none;line-height:50px;">
        <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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/NotAnEmpty/p/5419467.html