您的位置：首页 > 移动开发 > IOS开发

andriod/ios webview与js交互 html_demo

2016-04-27 16:39 531 查看

<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航