<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. yii2: oralce中文，有的汉字是2个字节，有的汉字是3个字节

    yii2: oralce中文,有的汉字是2个字节,有的汉字是3个字节 请用mb_substr转成1个英文字节

  2. B/S,C/S简单介绍

    B/S,C/S 架构 硬件环境不同:C/S 一般建立在专用的网络上, 小范围里的网络环境, 局域网之间再通过专门服务器提供连接和数据交换服务. B/S 建立在广域网之上的, 不必是专门的网络硬件环境, ...

  3. QQ钱包,微信,京东钱包,百度钱包,支付宝AGENT

    微信Mozilla/5.0 (Linux; Android 7.0; LON-AL00 Build/HUAWEILON-AL00; wv) AppleWebKit/537.36 (KHTML, lik ...

  4. org.apache.poi.poifs.filesystem.OfficeXmlFileException: The supplied data appears to be in the Office 2007+ XML.

    org.apache.poi.poifs.filesystem.OfficeXmlFileException: The supplied data appears to be in the Offic ...

  5. opencv:图像模糊处理

    接口: blur(sourceImage,dstImage,Size(,)); // 图像模糊处理 示例代码: #include <opencv.hpp> #include <img ...

  6. LeetCode OJ：Permutations（排列）

    Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the follow ...

  7. Android数据库代码优化(1) - 从Google的数据库guide说起

    假如我们没有任何在Android上使用SQLite的经验,现在要开始在工作中用SQLite存储一些数据.OK, 我们去看google的官方培训文档吧,http://developer.android. ...

  8. toString 和 valueOf 总结

    两者的共同点与不同点: 共同点:二者都能用来数据转换,并且在输出对象时会自动调用. 不同点:二者并存的情况下,在数值运算中,优先调用了valueOf,字符串运算中,优先调用了toString,没有操作 ...

  9. OpenGL ES 2: debugging, and improvements to VAO, VBO

    OpenGL ES 2: debugging, and improvements to VAO, VBO http://www.altdevblogaday.com/2013/10/12/opengl ...

  10. 【ES6】箭头函数

    let getPrices = () => 4.55 console.log(getPrices()) let arr = ['apple', 'banana', 'orange'] arr.f ...