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); ...
随机推荐
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- C++（二十二） — 指针变量、函数指针、void指针
1.指针变量 (1)指针变量必须在初始化后才可以正常使用,初始化就是给他分配一个有效的数据地址. 先初始化,后使用. (2)指针可以进行加减运算,++ 或者 --:将指针的位置向前或者向后移动一个数据 ...
- request方法传入动态参数的一个"误区"
晚上写了一个请求类,传了一个动态参数进去,实例化测试的时候,发现请求数据根本没法读到,先附上代码 import requests class MyRequests: def send_request( ...
- nyoj-1316-二分
acm.nyist.edu.cn/JudgeOnline/problem.php?pid=1316题目链接 Interval 时间限制:2000 ms | 内存限制:65535 KB 难度:3 描 ...
- css中实现显示和隐藏（转）
CSS中的display和visibility 在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JAM计数法（模拟）
题目描述 Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用相同个数的字母),英文字 ...
- [置顶]
C语言学习入门
编译文件:cc -c one.c two.c 生成.o目标文件 链接文件:cc one.o two.o 默认生成 a.out 执行文件 指定生成的可执行文件名 cc -o one one ...
- Windows GVLK密钥对照表（KMS激活专用
以下key来源于微软官网:https://technet.microsoft.com/en-us/library/jj612867.aspx Windows Server 2016 操作系统 KMS激 ...
- notebook查找文件