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); ...
随机推荐
- Mac 终端 Termial 高亮配置（PS1变量配置）
操作环境: 系统:Mac 10.12 编辑器:vim 一.无脑配置: 1. 打开中端输入: vi ~/.bash_profile 2. 打开并编辑 .bash_profile 文件: 按键盘“i”,进 ...
- 使用科大讯飞时碰上的问题(unity调用Android)
使用科大讯飞的时候公司已经有人配置好了Android项目,由于装机量的限制,所以基本上要更换里面的资源和更改app_id,然而在unity那边调用的时候总是出现各种各样的问题,特此记录下来 1.唤醒未 ...
- 20165332实验一 Java开发环境的熟悉
实验一 Java开发环境的熟悉 一.Java开发环境的熟悉-1 1.实验要求: 0 参考实验要求: 1 建立"自己学号exp1"的目录 : 2 在"自己学号exp1&qu ...
- Flask 的整体流程
Flask 的整体流程 封装 requestContext 对象, full_dispatch_request(视图函数 执行), response返回 从app.run() 开始 -->> ...
- 网站 安全 ---- 常见的 web 攻击
网站 安全 ---- 常见的 web 攻击 1 sql 注入(常用的攻击性)(django的orm是做过sql防护处理的) 危害: 非法读取,篡改,删除数据库中的数据 盗取用户的各类敏感信息.获取利益 ...
- 设置eclipse显示代码错误提示的
http://jingyan.baidu.com/article/f3e34a128d79aff5ea65356c.html
- I.MX6 give su command more permission
/************************************************************************************ * I.MX6 give s ...
- 获取mac地址方法之一 GetAdaptersInfo()
GetAdaptersInfo -20151116 防止返回的mac出现null 20151116 From:http://blog.csdn.net/weiyumingwww/article/det ...
- Java 三大特征之--多态
http://www.cnblogs.com/chenssy/p/3372798.html
- UVA11174 Stand in a Line
题意 PDF 分析 \[ f(i)=f(c_1)f(c_2)\dots\times(s(i)-1)!/(s(c_1)!s(c_2)! \dots s(c_k)! )\\ f(root)=(s(root ...