<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. django从请求到返回都经历了什么[转]

    原文地址:http://projectsedu.com/2016/10/17/django从请求到返回都经历了什么/ 从runserver说起 ruserver是使用django自己的web serv ...

  2. 客户端类中中记录异常的方法： 使用Log4net

    1.首先引用Log4Net 的命名空间 using log4net; 2.在使用的类中生命静态变量 log public class FileService    {        static re ...

  3. 2017年浙江工业大学大学生程序设计迎新赛热身赛-J-Forever97与寄信

    Forever97与未央是一对笔友,他们经常互相写信.有一天Forever97去邮局寄信,发现邮局的收费方式变成了按字收费,收取的费用为总字数除了其自身以外的最大因子.虽然Forever97是一个有情 ...

  4. IOS-Alcatraz（插件管理工具）

    一.简单说明 Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCode的 插件.模版以及颜色配置的工具. 二.如何安装 1.github地址:https://github.com/a ...

  5. SQL Server中的联合主键、聚集索引、非聚集索引

    我们都知道在一个表中当需要2列以上才能确定记录的唯一性的时候,就需要用到联合主键,当建立联合主键以后,在查询数据的时候性能就会有很大的提升,不过并不是对联合主键的任何列单独查询的时候性能都会提升,但我 ...

  6. JSP的指令

    JSP 指令 JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %&g ...

  7. 《Drools7.0.0.Final规则引擎教程》第4章 4.2 ruleflow-group&salience

    ruleflow-group 在使用规则流的时候要用到ruleflow-group属性,该属性的值为一个字符串,作用是将规则划分为一个个的组,然后在规则流当中通过使用ruleflow-group属性的 ...

  8. How your script code be coverted into arm code and running on ios.

    Your script code is compiled into DLLs (assemblies) by the editor. When you build for iOS, these ass ...

  9. CentOS给网站配置Https证书

    1.在腾讯云申请域名的证书 2.配置文件 安装相应模块: yum install mod_ssl openssl 编辑配置文件: cd /etc/httpd/conf.d vi jerryqi.con ...

  10. 旧书重温：0day2【5】shellcode变形记

    紧接上一篇,结合第一篇 //这篇文章主要成功溢出一个带有缓冲区溢出的小程序,其中我们的shellcode被strcpy截断了所以我们需要变形shellcode,这个实验中也出现了很多意想不到的拦路虎, ...