在UIWebView中加載的HTML所觸發的事件通過OC方法響應

　　前段時間在做項目時，在UIWebView加載的Html中點擊了一個區域需彈出拍照界面，可是根據業務的不同情況，區域的位置是不同的。我考慮了多種方案，最后還是覺得這個通過“橋梁”用OC方法來處理對應節點的觸發事件更為直接和方便。

　　工具類：WebViewJavascriptBridge  顧名思義，此類就像OC與JS的橋梁，可以使JS的事件與OC的方法相關聯。

　　WebViewJavascriptBridge包含一個類實例方法，入參是委托對象。

有一個委托方法，此方法是用來接受到html點擊事件返回的message后回調方法，參數包含：message（用來判斷是哪個點擊事件）,webView（判斷是從哪個UIWebView傳來的事件）

　　-(void)javascriptBridge:(WebViewJavascriptBridge *)bridge receivedMessage:(NSString *)message fromWebView:(UIWebView *)webView;

可調用的方法：

　　-(void)sendMessage:(NSString *)message toWebView:(UIWebView *)webView;

 

接下來就是其具體的使用方法

1- >第一步：（配置）在html中對應需要附加點擊事件的節點的屬性中添加onclick=” WebViewJavascriptBridge.sendMessage('messageContent’)”。

　　　　　　　以下JS代碼為添加事件監聽以及消息處理函數：

<script type="text/javascript">

                document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false);

                function onBridgeReady() {
                    WebViewJavascriptBridge.setMessageHandler(function(message) {
                                                              var el = document.body.appendChild(document.createElement('div'));
                                                              el.innerHTML = message;
                                                              });
                }

</script>

　　messageContent自定義。用來在OC方法中篩選

 

2->第二步（響應事件）在加載之前html的webview所在controller中創建WebViewJavascriptBridge的實例，直接通過類方法創建，傳入delegate對象參數。

@interface ViewController ()<WebViewJavascriptBridgeDelegate>

　　@property (strong, nonatomic) WebViewJavascriptBridge *bridge;

@end

 

@implementation ViewController

- (void)viewDidLoad {

   NSError *error = nil;

   NSString *filePath = [[NSBundle mainBundle] pathForResource:HTMLNAME ofType:HTML];//HTMLNAME:html文件名,HTML:@"html"

   NSString *htmlPath = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&error];

   self.bridge=[WebViewJavascriptBridge javascriptBridgeWithDelegate:self];

   [self.webView loadHTMLString:temp baseURL:nil];

   self.webView.delegate = self.bridge;

}

 

　　實現代理方法：

- (void)javascriptBridge:(WebViewJavascriptBridge *)bridge receivedMessage:(NSString *)message fromWebView:(UIWebView *)webView{

   if ([message isEqualToString:TAKEPHOTOTAG]) {

           //可調用OC方法來響應事件
  
    }
}

 

3->如果還需要將在OC方法中處理過的數據返回到Html中，可以使用以下方法

　　①添加JS函數，此函數是用來放入數據（我的DEMO中是返回的圖片資源）

<script type="text/javascript">
    function changeImg(option){
        document.getElementById("myImage").src = "data:image/png;base64,"+option;
    }
</script>

　　②OC方法中將這個函數插入到頁面上執行

[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"changeImg(\"%@\")",[GTMBase64 stringByEncodingData:UIImagePNGRepresentation(image)]]];

　TIP：使用stringByEvaluatingJavaScriptFromString時必須在UIWebView加載完成后（也就是webViewDidFinishLoad:）后執行；JS函數需要傳參時，在OC中引號必須轉義（如changeImg(\"%@\")  )

 

我寫了一個簡單的DEMO，在網頁中也能拍照。

https://github.com/alanshen0118/CameraInHtml.git

 

原創文章轉載請注明：轉載自Alan_Sim

本文固定鏈接：http://www.cnblogs.com/AlannSim/p/4845945.html