ios嵌h5互调

梦里梦外; 2022-05-29 22:13 178阅读 0赞

<!doctype html>
    <html><head>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    	<style type='text/css'>
    		html { font-family:Helvetica; color:#222; }
    		h1 { color:steelblue; font-size:24px; margin-top:24px; }
    		button { margin:0 3px 10px; font-size:12px; }
    		.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
    	</style>
    </head><body>
    	<h1>WebViewJavascriptBridge Demo</h1>
    	<script>
    	window.onerror = function(err) {
    		log('window.onerror: ' + err)
    	}
    
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'https://__bridge_loaded__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
    
        setupWebViewJavascriptBridge(function(bridge) {
    		var uniqueId = 1
    		function log(message, data) {
    			var log = document.getElementById('log')
    			var el = document.createElement('div')
    			el.className = 'logLine'
    			el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
    			if (log.children.length) { log.insertBefore(el, log.children[0]) }
    			else { log.appendChild(el) }
    		}
    		//ios触发js接收
    		bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
    			log('ObjC called testJavascriptHandler with', data)
    			var responseData = { 'Javascript Says':'Right back atcha!' }
    			log('JS responding with', responseData)
    			responseCallback(responseData)
    		})
    
    		document.body.appendChild(document.createElement('br'))
    		//js触发ios接收
    		var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
    		callbackButton.innerHTML = 'Fire testObjcCallback'
    		callbackButton.onclick = function(e) {
    			e.preventDefault()
    			log('JS calling handler "testObjcCallback"')
    			bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
    				log('JS got response', response)
    			})
    		}
    	})
    	</script>
    	<div id='buttons'></div> <div id='log'></div>
    </body></html>