IOS 와 웹 페이지 JS 의 상호작용 상세 설명 및 실례

IOS 와 웹 페이지 JS 상호작용
모 바 일 앱 의 빠 른 교체 개발 추세 에 따라 점점 더 많은 앱 에 html 페이지 가 삽입 되 었 지만 일부 중대 형 앱 에서 특히 전자상거래 앱 은 html 페이지 가 전시 기능 만 만족 시 키 는 것 이 아니 라 이때 html 는 네 이 티 브 언어 와 상호작용 을 하고 서로 전달 할 수 있 도록 요구한다.예 를 들 어 앱 에서 인기 관광지 의 홈 페이지 에서 특정한 관광 지 를 클릭 하면 원생 중의 해당 관광지 상세 페이지 컨트롤 러 로 이동 할 수 있다.
이 를 위해 저 는 가장 자주 사용 하 는 가장 편리 하고 효과 적 인 OC 와 JS 의 상호작용 방식 세 가 지 를 정리 하여 여러분 들 이 교 류 를 배 울 수 있 도록 했 습 니 다.
첫 번 째:JS 는 OC 에 값 을 전달한다.
1.기술 방안:JavaScriptCore.framework 프레임 워 크 사용
2.장면 사용:웹 페이지 의 코드 중의 한 방법,예 를 들 어 이벤트 방법 을 클릭 하여 이 방법의 매개 변 수 를 OC 에 전달 하여 OC 에 사용 하도록 한다.
예 를 들 어 앱 에서 인기 관광지 의 홈 페이지 에 인기 관광지 가 많 습 니 다.특정한 관광지 의 사진 이나 이름 을 클릭 하면 원생 중의 해당 관광지 상세 페이지 컨트롤 러 로 이동 할 수 있 습 니 다.
3.코드 는 다음 과 같다.
OC 에서 구현 할 코드:
JavaScriptCore.framework 정적 라 이브 러 리 에 끌 어 다 놓 고 UIWebView Delegate 프 록 시 프로 토 콜 을 준수 합 니 다.
-webView Did Finish Load:방법 에 다음 코드 를 작성 합 니 다:

- (void)webViewDidFinishLoad:(UIWebView *)webView{

  JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

  context[@"passValue"] = ^{

    NSArray *arg = [JSContext currentArguments];
    for (id obj in arg) {
      NSLog(@"%@", obj);
    }
  };

}

그 중에서 passValue 는 JS 의 함수 명 으로 얻 은 arg 배열 에서 JS 인 passValue 함수 의 매개 변수,즉 JS 가 OC 에 전달 할 매개 변수 입 니 다.
JS 에서 구현 할 코드:

function testClick()
      {
        var str1=document.getElementById("text1").value;
        var str2=document.getElementById("text2").value;

        passValue(str1,str2);
      }

OC 에 값 을 전달 해 야 하 는 함수(예:testClick()에서 passValue()함 수 를 직접 호출 하여 값 을 전달 하면 됩 니 다.
두 번 째:JS 는 OC 에 값 을 전달한다.
1.기술 방안:사용자 정의 url 방법 을 사용 하여 웹 페이지 를 클릭 할 때마다
2.장면 사용:웹 페이지 의 코드 중의 한 방법,예 를 들 어 이벤트 방법 을 클릭 하여 이 방법의 매개 변 수 를 OC 에 전달 하여 OC 에 사용 하도록 한다.
예 를 들 어 앱 에서 인기 관광지 의 홈 페이지 에 인기 관광지 가 많 습 니 다.특정한 관광지 의 사진 이나 이름 을 클릭 하면 원생 중의 해당 관광지 상세 페이지 컨트롤 러 로 이동 할 수 있 습 니 다.
3.코드 는 다음 과 같다.
JS 에서 구현 할 코드:

 function testClick()
      {

        var str1=document.getElementById("text1").value;
        var str2=document.getElementById("text2").value;

        // "objc://"       ;
        // str1&str2    OC  , ":/"    
        window.location.href="objc://"+":/"+str1+":/"+str2;
      }

OC 에 값 을 전달 해 야 하 는 함수 에(예:testClick()위 와 같은 형식의 코드 를 쓰 십시오.
그 중에서 obj c:/는 사용자 정의 프로 토 콜 헤드 이 고 str1 과 str2 는 JS 가 OC 에 전달 할 값 입 니 다.
OC 에서 구현 할 코드:

//  UIWebViewDelegate    。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
  //       url
  NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding];

  // url         "objc://"
  if ([requestStr hasPrefix:@"objc://"]) {

    //  "://"    url      ，    arr
    NSArray *arr = [requestStr componentsSeparatedByString:@"://"];
    NSLog(@"%@",arr);

    //     
    NSString *paramStr = arr[1];
    NSLog(@"%@",paramStr);

    // ":/"       url       ，    arr2，  arr2[0]  ，arr2[1]       ，arr2[2]       ，    
    NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"];
    NSLog(@"%@",arr2);

    //    ，    
    if (arr2.count) {
      NSLog(@"   ");
      [self doSomeThingWithParamA:arr2[1] andParamB:arr2[2]];
    }else{
      NSLog(@"   ");
    }
    return NO;
  }

  return YES;
}
// JS        
- (void)doSomeThingWithParamA:(id)paramA andParamB:(id)paramB{

  NSLog(@"%@  %@", paramA, paramB);
}

세 번 째:제3자 라 이브 러 리 를 이용 하여 JS 와 OC 의 상호 전 가 를 실현 한다.
1.기술 방안:WebViewJavascriptBridge 3 자 라 이브 러 리 사용
2.장면 사용:웹 페이지 의 코드 중의 한 방법,예 를 들 어 이벤트 방법 을 클릭 하여 이 방법의 매개 변 수 를 OC 에 전달 하여 OC 에 사용 하도록 한다.
예 를 들 어 앱 에서 인기 관광지 의 홈 페이지 에 인기 관광지 가 많 습 니 다.특정한 관광지 의 사진 이나 이름 을 클릭 하면 원생 중의 해당 관광지 상세 페이지 컨트롤 러 로 이동 할 수 있 습 니 다.
또는 원생 중의 사용자 정 보 를 웹 페이지 에 전달 하여 개성 화 된 전시 로 한다.
3.코드 는 다음 과 같다.
OC 패스 JS
JS 에서 구현 해 야 할 코드:

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 = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }

  //         
  setupWebViewJavascriptBridge(function (bridge){

    //OC   JS 'testJavascriptHandler'             ；'data' OC     ；'responseCallback' JS      OC   
    bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
        //  OC     
        log('ObjC called testJavascriptHandler with', data)

        var responseData = { 'Javascript Says':'Right back atcha!' }

        log('JS responding with', responseData)

        // OC   
        responseCallback(responseData)

      })

OC 에서 구현 해 야 할 코드:
제3자 라 이브 러 리 WebViewJavascriptBridge 가 져 오기;UIWebViewDelegate 준수;

 //     Bridge    
  [WebViewJavascriptBridge enableLogging];

  //  webView bridge
  _bridge = [WebViewJavascriptBridge bridgeForWebView:web];

  [_bridge setWebViewDelegate:self];

  //OC JS  ，             'testJavascriptHandler'；data         
  [_bridge callHandler:@"testJavascriptHandler" data:@{@"  ":@"20"}];

JS 는 OC 에 값 을 전달한다
JS 에서 구현 해 야 할 코드:

 //          
   callbackBt.onclick = function()
   { 
   var str1=document.getElementById("text1").value;
   var str2=document.getElementById("text2").value;

   //JS OC  。'passValue'            ；'str1'&'str2'     ； response OC    JS   
   bridge.callHandler('passValue', {str1,str2}, function(response) {
                })

   }

OC 에서 구현 해 야 할 코드:
제3자 라 이브 러 리 WebViewJavascriptBridge 가 져 오기;UIWebViewDelegate 준수;

 //     Bridge    
  [WebViewJavascriptBridge enableLogging];

  //  webView bridge
  _bridge = [WebViewJavascriptBridge bridgeForWebView:web];

  [_bridge setWebViewDelegate:self];

  //js oc  .'passValue'            ；'data' JS     ；'responseCallback' OC     JS     
  [_bridge registerHandler:@"passValue" handler:^(id data, WVJBResponseCallback responseCallback) {

    //  js     
    NSLog(@"%@", data);

    //   js  
    responseCallback(@"   ");
  }];

주의해 야 할 것 은 어느 쪽 이 어느 쪽 에 값 을 전달 하든지 간 에 값 을 전달 하 는 방법의 명칭 과 대응 하 는 수신 값 의 방법의 명칭 은 일치 해 야 한 다 는 것 이다.
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!