<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

andriod/ios webview与js交互 html_demo的更多相关文章

  1. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  2. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

  3. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  4. webview与js交互

     对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...

  5. iOS webview注入JS

    - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...

  6. [android] WebView与Js交互

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...

  7. iOS之与JS交互通信

    随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一.UIWebview && iframe && ...

  8. ios WKWebView 与 JS 交互实战技巧

    一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...

  9. Android Webview 与JS交互

    Android中 WebView控件支持JS与本地代码的交互. // 是否允许在webview中执行javascript webSettings.setJavaScriptEnabled(true); ...

随机推荐

  1. RadioButton实现多选一

    RadioButton实现多选一 一.简介 二.RadioButton实现多选一方法 1.将多个RadioButton放在一个RadioGroup里面 <RadioGroup android:i ...

  2. oracle:查询数据表是否存在

    oracle:查询数据表是否存在 select count(*) as NUM from all_tables where table_name = '{$table}' 或者: select cou ...

  3. 为什么font-size推荐使用具体数值？

    1.font-size的单位 font-size通常用的单位是px/em/rem,px就不说了,em/rem 主要用在移动端,原因的根据根元素大小进行适配,简而言之,em相对于父级定义基础字号,rem ...

  4. app支付宝支付java服务端代码

    app支付java服务端生成支付单文档 public String aliPay(String amount,Map<String,Object> body){ //实例化客户端 Alip ...

  5. 使用Jenkins自动编译我的 java 项目 git maven jenkins

    之前的项目已经将jenkins部署好,现在添加maven项目 准备工作 安装插件 Git plugin Publish Over SSH 全局设置  key: 是 linux服务器的私钥 Global ...

  6. YYMMDD转YYYY-MM-DD

    date.replace(/(\d{4})(\d{2})(\d{2})/g,'$1-$2-$3');

  7. L140

    一本载有许多时装照片的杂志是用带有光泽的优质纸印制的.A glossy magazine has lots of pictures of fashionable clothes and is prin ...

  8. 【机器学习】Boosting和Bagging的差别

    boosting和bagging的差别: bagging中的模型是强模型,偏差低,方差高.目标是降低方差.在bagging中,每个模型的bias和variance近似相同,但是互相相关性不太高,因此一 ...

  9. 使用第三方图表工具——Chart.js

    效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  10. 使用sqlmap执行SQL注入攻击

    sqlmap是开源的SQL注入自动攻击工具,它可以自动的探测SQL注入点并且进一步控制网站的数据库. Kali Linux默认安装了这个工具. 找到潜在的攻击目标 第一步是找到有SQL注入漏洞的网站. ...