<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. python脚本3_输入若干个整数打印出最大值

    #输入若干个整数,打印出最大值 # m = int(input('Input first number >>>')) while True: c = input('Input a n ...

  2. uva11827gcd

    gcd裸题,不过输入要注意gets会tle,要用快速读入 #include<map> #include<set> #include<cmath> #include& ...

  3. wget 官方jdk

    每次下载jdk都是一件头疼的事,特别是在服务器上下载. 之前想的是下载到本地,然后通过ftp工具传上去.汗.. 后来想到用wget 直接下载到服务器上. 在网上找了几个例子,wget 加参数,如:wg ...

  4. python面向对象编程 继承 组合 接口和抽象类

    1.类是用来描述某一类的事物,类的对象就是这一类事物中的一个个体.是事物就要有属性,属性分为 1:数据属性:就是变量 2:函数属性:就是函数,在面向对象里通常称为方法 注意:类和对象均用点来访问自己的 ...

  5. 八大排序算法的java实现

    有时间再贴算法分析图 JDK7的Collections.sort()的算法是TimSort, 适应性的归并排序, 比较晦涩难懂, 这里没有实现 public class mySort { // 冒泡排 ...

  6. struts中操作request,session

    在Action类中操作request,session 方法一.利用ActionContext.getContext().get("request"); //返回的是Map集合 Ma ...

  7. Android 静默安装/后台安装& Root permission

    Android 静默安装/后台安装& Root permission 静默安装其实很简单,今天在网上找资料找半天都说的很复杂,什么需要系统安装权限.调用系统隐藏的api.需要系统环境下编译.需 ...

  8. Eclipse上安装springsource-tool-suite(转)

    Eclipse上安装springsource-tool-suite 版本必须匹配. spring tool suite 是一个基于eclipseIDE开发环境中的用于开发spring应用程序的工具.提 ...

  9. spring import jar中的bean配置文件

    在spring中import resource file,有两种情况:classes目录和jar包 如果资源文件在classes目录: <import resource="classp ...

  10. 机器学习算法实现解析——libFM之libFM的模型处理部分

    本节主要介绍的是libFM源码分析的第三部分--libFM的模型处理. 3.1.libFM中FM模型的定义 libFM模型的定义过程中主要包括模型中参数的设置及其初始化,利用模型对样本进行预测.在li ...