Android
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>方法实现</title> <meta name="author" content="m.gome.com.cn"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="js/zepto.js"></script> </head> <body> <h1>JS_Android交互测试</h1> <script type="text/javascript"> function test(){ var _log = document.createElement('p'); document.body.appendChild(_log); _log.innerHTML = 'JS handler [test] was called'; } //打印错误日志 window.onerror = function(err) { var errlog = document.createElement('p'); document.body.appendChild(errlog); errlog.innerHTML = err; } Zepto(function(){ bridge.send('Enemy spotted'); }) window.onload = function(){ var uniqueId = 1; //日志记录 function log(message, data) { var log = document.getElementById('log'), el = document.createElement('div'); el.className = 'logLine'; el.innerHTML = uniqueId++ + '. ' + message + (data ? ': ' + JSON.stringify(data) : ''); if (log.children.length) { log.insertBefore(el, log.children[0]); } else { log.appendChild(el); } } log('window onload Ready'); /* 功能1 * 页面加载完成后给Native传值 * Native随时给js传值 * 应用场景: H5页面传值给Native,动态生成顶栏标题。 * 测试用例: 页面加载完成后,js给Native传值,Native拿到后传值给js,页面打印日志 */ /* 功能2 * Native调用js方法,执行完后回调 * 应用场景: Native返回按钮调用H5返回功能 * 测试用例: 项目js和wap公用js(不影响现有wap站js库,且调用灵活) */ // bridge.delayJsCallBack(0, 'call back haha', function (msg) { // bridge.alert(msg); // }); //bridge.registerHandler('test', wapJs()); //test(); /* 功能3 * js调用Native方法，执行完后回调 * 应用场景: H5分享按钮调用Native分享功能 * 测试用例: alert */ var Btn = document.getElementById('btn'); Btn.ontouchstart = function(e){ e.preventDefault(); log("Calling Native handler testOC"); bridge.callHandler('testOC',{'id': '123'}, function(response) { log('Got response from testOC callBack', response) }) } } </script> <button id='btn'>js call Native</button> <div id='log'></div> </body> </html>
IOS:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>方法实现</title> <meta name="author" content="m.gome.com.cn"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.effect.js"></script> </head> <body> <h1>JS_OC交互测试</h1> <script type="text/javascript"> window.onerror = function(err) { log(err); } //给WebViewJavascriptBridgeReady事件注册一个Listener document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false) //事件的响应处理 function onBridgeReady(event) { var bridge = event.bridge, uniqueId = 1; //日志记录 function log(message, data) { var log = document.getElementById('log'), el = document.createElement('div'); el.className = 'logLine'; el.innerHTML = uniqueId++ + '. ' + message + (data ? ': ' + JSON.stringify(data) : ''); if (log.children.length) { log.insertBefore(el, log.children[0]); } else { log.appendChild(el); } } log('WebView2Javascript Bridge Ready'); /* 功能1 * 页面加载完成后给Native传值 * Native随时给js传值 * 应用场景: H5页面传值给Native,动态生成顶栏标题。 * 测试用例: 页面加载完成后,js给Native传值,Native拿到后传值给js,页面打印日志 */ bridge.send('Enemy spotted'); //初始化操作，并定义默认的消息处理逻辑 bridge.init(function(message) { log('Roger that, 3Q js!', message); }) /* 功能2 * Native调用js方法,执行完后回调 * 应用场景: Native返回按钮调用H5返回功能 * 测试用例: 项目js和wap公用js(不影响现有wap站js库,且调用灵活) */ bridge.registerHandler('test', function(data, response) { log('JS handler [test] was called', data); response.respondWith({ 'Javascript':'Roger!' }); }) //bridge.registerHandler('test', wapJs()); /* 功能3 * js调用Native方法，执行完后回调 * 应用场景: H5分享按钮调用Native分享功能 * 测试用例: alert */ var Btn = document.getElementById('btn'); Btn.ontouchstart = function(e){ e.preventDefault(); log("Calling Native handler testOC"); bridge.callHandler('testOC',{'id': '123'}, function(response) { log('Got response from testOC callBack', response) }) } } </script> <button id='btn'>js call Native</button> <div id='log'></div> </body> </html>