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的异常分析 IllegalReferenceCountException refCnt: 0
netty的异常 IllegalReferenceCountException refCnt: 0 这是因为Netty有引用计数器的原因,自从Netty 4开始,对象的生命周期由它们的引用计数(ref ...
- C#限制float有两位小数
string str = (float.Parse(recode)).ToString("f2");//recode是string类型
- LinuxMint Mate 安装Google拼音输入法（Fcitx）
安装Google拼音输入法(Fcitx)$ sudo apt-get install fcitx fcitx-config-gtk fcitx-frontend-all fcitx-ui-classi ...
- maven 其他远程仓库配置
在平时的开发中,我们往往不会使用默认的中央仓库,默认的中央仓库访问的速度比较慢,访问的人或许很多,有时候也无法满足我们项目的需求,可能项目需要的某些构件中央仓库中是没有的,而在其他远程仓库中有,如JB ...
- MongoDB 可视化管理工具 MongoCola-1.1.0 测试版发布
首先,感谢大家对于本工具的支持. 经过一周的努力,最新版的工具测试版出炉了,这个版本是一个很重要的版本. 为什么说这个版本重要?以前的工具,只支持一个视图窗口,也就是说了,一次只能看一个数据集的数据. ...
- 记录下MD5加密遇到的坑
错误的写法: public static String md5(String plainText) { byte[] secretBytes = null; try { secretBytes = M ...
- http://www.cnblogs.com/peida/archive/2013/05/31/3070790.html深入理解Java：SimpleDateFormat安全的时间格式化
http://www.cnblogs.com/peida/archive/2013/05/31/3070790.html
- I/O的方法、输入流和输出流
1.文件常见方法 boolean flag=f.exists(); //文件是否存在 flag=f.isFile(); //是否是文件 flag=f.isDirectory(); //是否 ...
- <tf-idf + 余弦相似度> 计算文章的相似度
背景知识: (1)tf-idf 按照词TF-IDF值来衡量该词在该文档中的重要性的指导思想:如果某个词比较少见,但是它在这篇文章中多次出现,那么它很可能就反映了这篇文章的特性,正是我们所需要的关键词. ...
- 压缩感知Compressive sensing（一）
compressive sensing(CS) 又称 compressived sensing ,compressived sample,大意是在采集信号的时候(模拟到数字),同时完成对信号压缩之意. ...