UIWebView与javascript的交互二资源-CSDN文库

共24个文件

m：5个

plist：3个

h：3个

UIWebView

javascript

html

需积分: 19 10 浏览量 2015-04-22 11:35:55 上传评论收藏 42KB ZIP 举报

在iOS开发中，UIWebView是苹果提供的一种组件，用于在应用程序内部展示网页内容。这篇教程主要探讨了UIWebView与JavaScript的交互，这是构建混合式移动应用的关键技术之一。UIWebView不仅可以展示HTML页面，还能与Objective-C（OC）代码进行通信，从而实现网页与原生应用的深度集成。一、UIWebView的使用 UIWebView的使用很简单，首先需要创建一个UIWebView实例，并将其添加到视图层级结构中。然后，可以加载本地或远程的HTML资源： ```swift let webView = UIWebView(frame: view.bounds) view.addSubview(webView) let url = URL(string: "file:///path/to/your/html/file.html")! webView.loadRequest(URLRequest(url: url)) ``` 二、JavaScript与Objective-C的交互 1. JavaScript调用Objective-C：使用`stringByEvaluatingJavaScriptFromString:`方法，我们可以执行JavaScript代码并获取结果。例如，假设我们有一个JavaScript函数`callNativeFunction`，可以在Objective-C中这样调用： ```objc NSString *jsCall = @"callNativeFunction('参数')"; [webView stringByEvaluatingJavaScriptFromString:jsCall]; ``` 2. Objective-C调用JavaScript：如果要在JavaScript中响应原生事件，可以设置UIWebView的`WKUserContentController`，注册一个用户脚本，并监听`WKScriptMessage`。当JavaScript触发特定事件时，会发送消息到Objective-C： ```objc WKUserContentController *userController = [[WKUserContentController alloc] init]; [userController addScriptMessageHandler:self name:@"callFromNative"]; WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; config.userContentController = userController; WKWebView *webView = [[WKWebView alloc] initWithFrame:frame configuration:config]; // JavaScript代码片段 NSString *script = @"window.webkit.messageHandlers.callFromNative.postMessage('Hello, Native!')"; [webView evaluateJavaScript:script completionHandler:nil]; ``` 三、HTML事件触发Objective-C 在描述中提到的Demo中，HTML页面上的事件（如点击按钮）可以触发JavaScript函数，这个函数再调用`callFromNative`这样的用户脚本，将数据传递给Objective-C。例如，HTML代码可能包含以下按钮： ```html <button onclick="sendDataToNative()">发送数据</button> <script> function sendDataToNative() { window.webkit.messageHandlers.callFromNative.postMessage("这是从HTML传递的数据"); } </script> ``` 四、安全与性能考虑虽然JavaScript与Objective-C的交互提供了极大的灵活性，但也需要注意一些问题。比如，过多的交互可能导致性能下降，因为每次通信都需要在JavaScript和Objective-C之间建立桥梁。此外，为了安全起见，应限制JavaScript能够访问的Objective-C方法，防止恶意代码的注入。五、WKWebView的引入随着iOS 8的发布，苹果推出了WKWebView作为UIWebView的替代品，它提供了更好的性能和更现代的Web渲染引擎。WKWebView同样支持JavaScript与原生代码的交互，但API有所不同，需要使用`WKWebViewConfiguration`和`WKUserContentController`来实现。总结，UIWebView与JavaScript的交互是iOS开发中的重要技能，允许开发者结合HTML、CSS和JavaScript的便捷性，与原生应用的强大功能相结合，打造出色的用户体验。通过学习和实践这个Demo，开发者可以更好地理解和掌握这一技术，提升混合式应用的开发能力。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5Demo1.zip （24个子文件）

HTML5Demo

.DS_Store 6KB

HTML5Demo

WebViewJavascriptBridge

WebViewJavascriptBridge.h 2KB

WebViewJavascriptBridge.m 15KB

WebViewJavascriptBridge.js.txt 3KB

ViewController.m 3KB

Info.plist 1KB

main.m 327B

test.js 1KB

Base.lproj

Main.storyboard 2KB

LaunchScreen.xib 4KB

Images.xcassets

AppIcon.appiconset

Contents.json 585B

ViewController.h 278B

AppDelegate.h 270B

test.html 726B

AppDelegate.m 2KB

HTML5Demo.xcodeproj

project.xcworkspace

xcshareddata

HTML5Demo.xccheckout 3KB

contents.xcworkspacedata 154B

xcuserdata

jack.xcuserdatad

UserInterfaceState.xcuserstate 19KB

xcuserdata

jack.xcuserdatad

xcdebugger

Breakpoints_v2.xcbkptlist 1KB

xcschemes

HTML5Demo.xcscheme 4KB

xcschememanagement.plist 571B

project.pbxproj 18KB

HTML5DemoTests

Info.plist 742B

HTML5DemoTests.m 858B

;(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) })();

评论收藏

内容反馈