<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. Java 基于JavaMail的邮件发送

    http://blog.csdn.net/xietansheng/article/details/51673073 http://blog.csdn.net/xietansheng/article/d ...

  2. 为啥YII2 会出现 mcrypt_generic_init(): Key size is 0

    解决方案如下: (关键) 示例代码中,加密解密类的实例创见通过 Class 同名方法 的方式创建. public function WXBizMsgCrypt($token, $encodingAes ...

  3. Selenium with Python 004 - 页面元素操作

    毫无疑问,首先需要导入webdriver from selenium import webdriver 清除文本 driver.find_element_by_id('kw').clear() 文本输 ...

  4. mooseFS学习篇

    官方网站:http://www.moosefs.org/ About MooseFS MooseFS is a fault tolerant, network distributed file sys ...

  5. angular之 $watch 和$digest 和$apply和$observe的区别

    $watch 代表的就是对数据源的监听,当数据源发生变化,就会触发第二个参数的回调函数 $digest 代表触发一个数据源变化的事件 $apply 代表对于$digest的一个封装,他多了一个参数 . ...

  6. LeetCode OJ：Majority Element（主要元素）

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  7. 从输入url到页面加载的过程

    用户端请求步骤:DNS解析URL地址.生成HTTP请求报文.构建TCP连接.使用IP协议选择传输路线.数据链路层保证数据的可靠传输.物理层将数据转换成电子.光学或微波信号进行传输 网络传输: 从客户机 ...

  8. pgbench使用记录

    1.初始化: pgbench -i pgbench 如果端口号有变化,需要先手动创建数据库,再执行. pgbench -i -s 10 -p 5433 pgbench 重点:主要用到两个参数,-i:初 ...

  9. js mouseover/out 要用mouseenter/leave 代替

    js中 onmouseover/out 在进入离开绑定事件的子元素时,都会触发一次,因此项目中药尽量少用 可以使用onmouseenter/leave代替,它们在绑定事件上只会触发一次,不会重复触发

  10. grep 常用正则匹配

    1.或操作 grep -E '123|abc' filename // 找出文件(filename)中包含123或者包含abc的行 egrep '123|abc' filename // 用egrep ...