andriod/ios webview与js交互 html_demo
<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的更多相关文章
- iOS webView与js交互在文本空格上输入文字
项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...
- webview与js交互（转）
原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...
- webView和js交互
与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...
- webview与js交互
对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...
- iOS webview注入JS
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...
- [android] WebView与Js交互
获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...
- iOS之与JS交互通信
随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一.UIWebview && iframe && ...
- ios WKWebView 与 JS 交互实战技巧
一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...
- Android Webview 与JS交互
Android中 WebView控件支持JS与本地代码的交互. // 是否允许在webview中执行javascript webSettings.setJavaScriptEnabled(true); ...
随机推荐
- Netty官方示例
一.DEMO 官方并没有使用Hello World来作为一个例子,而是采用RFC的DISCARD,这个协议定义了就是接收到请求后什么也不干. 第一步编写DiscardServerHandler类: p ...
- Kinect 2.0 默认姿势的中文意思
RaiseRightHand/RaiseLeftHand 抬起左右手高于肩膀一秒Psi 举起双手高于肩膀一秒Tpose T姿势Stop 右手放下,左手缓慢贴住身侧(腰以下)或者左右调换Wave 挥手 ...
- Sql Server 中关于@@ERROR的一个小小误区
我们经常写存储过程的时候会用到@@ERROR来判断执行是否成功,很久没有写复杂点的存储过程了,今天发现前段时间写的一个proc出现了bug,由于定义参数时,字符串长度设的有点短,导致传进来的值中间被截 ...
- ES6相关文章
1.https://www.cnblogs.com/xiaotanke/p/7448383.html (export ,export default 和 import 区别 以及用法)
- IOS-通讯录
一.通讯录简介 iOS提供了AddressBook.framework框架,允许开发者与设备中的通讯录进行数据交互 二.查询授权状态 可以调用ABAddressBookGetAuthorizati ...
- java mybatis XML文件中大于号小于号转义(转载)
因为这个是xml文件不允许出现类似“>”这样的字符 用了转义字符把>和<替换掉,然后就没有问题了. XML转义字符 字段 符号 说明 < ; < 小于号 & ...
- laravel中Blade模板继承
Blade模板继承 和 区块 <!-- 文件保存于 resources/views/layouts/app.blade.php --> <html> <head> ...
- Tomcat和Servlet
Tomcat Tomcat是什么,Tomcat是目前市场上主流Web服务器之一,是用Java语言开发的项目.Tomcat支持Servlet和JSP的规范,它由一组嵌套的层次和组件组成.结构如下图 所有 ...
- MongoCola使用教程 1 - MongoDB的基本操作和聚合功能---Mongdb客户端软件操作说明
前言 在开始正文之前,感谢博客园的Nosql爱好者对于MongoCola工具的试用(使用).特别感谢 呆呆 这位朋友的Bug报告,让我纠正了一个很严重的Bug.同时也感谢以前的多个网友在博客留言中给我 ...
- UI-自定义TabBar
MyCustomTabBar.h文件 #import <UIKit/UIKit.h> @interface MyCustomTabBar : UITabBarController @end ...