>웹 프론트엔드 >JS 튜토리얼 >Android의 Java와 JavaScript 상호작용에 대한 자세한 설명

Android의 Java와 JavaScript 상호작용에 대한 자세한 설명

黄舟
黄舟원래의
2017-03-15 17:30:581686검색

Android는 웹 페이지 처리를 위한 매우 강력한 WebView 컨트롤을 제공하며, 웹 페이지에서 JavaScript는 또 다른 매우 중요한 스크립트입니다. 이 기사에서는 Java 코드와 Javascript 코드 간의 상호 호출을 구현하는 방법을 소개합니다.

구현 방법

Java와 js의 상호작용을 구현하는 것은 매우 편리합니다. 일반적으로 다음 단계만 필요합니다.

  • WebView에서는 JavaScript 스크립트 실행이 가능합니다.

  • WebView는 JavaScript 호출을 위한 대화형 인터페이스를 설정합니다.

  • 클라이언트와 웹페이지가 서로 호출하는 코드를 작성합니다.

이 예제 코드

설명의 편의를 위해 모든 코드를 먼저 게시합니다

Java 코드

package com.example.javajsinteractiondemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {
  private static final String LOGTAG = "MainActivity";
  @SuppressLint("JavascriptInterface")
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      final WebView myWebView = (WebView) findViewById(R.id.myWebView);
      WebSettings settings = myWebView.getSettings();
      settings.setJavaScriptEnabled(true);
      myWebView.addJavascriptInterface(new JsInteration(), "control");
      myWebView.setWebChromeClient(new WebChromeClient() {});
      myWebView.setWebViewClient(new WebViewClient() {

          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
              testMethod(myWebView);
          }

      });
      myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
  }

  private void testMethod(WebView webView) {
      String call = "javascript:sayHello()";

      call = "javascript:alertMessage(\"" + "content" + "\")";

      call = "javascript:toastMessage(\"" + "content" + "\")";

      call = "javascript:sumToJava(1,2)";
      webView.loadUrl(call);

  }

  public class JsInteration {

      @JavascriptInterface
      public void toastMessage(String message) {
          Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
      }

      @JavascriptInterface
      public void onSumResult(int result) {
          Log.i(LOGTAG, "onSumResult result=" + result);
      }
  }

}

앞- 웹 페이지 코드 종료

<html>
<script type="text/javascript">
    function sayHello() {
        alert("Hello")
    }

    function alertMessage(message) {
        alert(message)
    }

    function toastMessage(message) {
        window.control.toastMessage(message)
    }

    function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
    }
</script>
Java-Javascript Interaction In Android
</html>

호출 예

js가 Java를 호출

호출 형식은 window.jsInterfaceName.methodName(parameterValues)입니다. 이 예에서는 주입 인터페이스로 컨트롤을 사용합니다. 이름.

function toastMessage(message) {
  window.control.toastMessage(message)
}

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}

Java 호출 JS

js를 호출하는 webView의 기본 형식은 webView.loadUrl("javascript:methodName(parameterValues)")

매개변수나 매개변수 없이 js를 호출하는 것입니다. 반환 값함수

String call = "javascript:sayHello()";
webView.loadUrl(call);

매개 변수를 사용하고 반환 값 없이 js 함수 호출

문자열을 매개 변수로 사용하려면 큰따옴표를 이스케이프해야 합니다. 값.

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

매개변수와 반환값으로 js 함수 호출

안드로이드는 4.4 이전에는 js 함수를 직접 호출하고 값을 얻는 메소드를 제공하지 않았기 때문에 그 이전에는 호출하는 것이 일반적인 생각이었습니다. java js 메소드는 js 메소드가 실행된 후 다시 java 코드를 호출하여 값을 반환합니다.

1.Java는 js 코드

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

2.js 함수 처리를 호출하고 java 메소드를 호출하여 결과를 반환합니다.

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

3.Java는 js 함수를 콜백 메소드 반환 값

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

4.4 처리

Android 4.4 이후에는 평가Javascript를 사용하세요. 다음은 반환 값이 있는 js 메소드의 간단한 대화형 예입니다.

function getGreetings() {
      return 1;
}

evaluateJavascript 메소드를 사용하여

private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

출력 결과

I/MainActivity( 1432): onReceiveValue value=1

를 호출하는 경우

  • 위에서는 반환 결과를 문자열로 제한합니다. 간단한 유형의 경우 문자열로 변환하여 반환을 시도합니다. 복잡한 데이터 유형의 경우 문자열 형식을 사용하는 것이 좋습니다. json반환.

  • evaluateJavascript 메소드는 UI 스레드(메인 스레드)에서 호출되어야 하므로 onReceiveValue도 메인 스레드에서 실행됩니다.

Q&A

경고가 팝업되지 않습니다

WebChromeClient를 설정하지 않았어야 합니다. 아래 코드에 따라 설정하세요. up

myWebView.setWebChromeClient(new WebChromeClient() {});

잡히지 않은 참조 오류: functionName이 정의되지 않았습니다

문제의 원인은 웹 페이지의 js 코드가 로드되지 않았기 때문입니다, 그래서 js 메소드가 호출됩니다. 해결책은 js 메소드

myWebView.setWebViewClient(new WebViewClient() {

  @Override
  public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
      //在这里执行你想调用的js函数
  }

});

Uncaught TypeError: Object [object Object] has no method

보안 제한 문제

를 호출하는 것입니다.

버전 4.2 이상의 컴퓨터에서만 문제가 발생하는 경우 문제는 시스템이 보안 제한을 받고 있다는 것입니다. Android 문서에는 다음과 같이 명시되어 있습니다.

주의: targetSdkVersion을 17 이상으로 설정한 경우 웹 페이지 코드에서 사용하려는 모든 메소드에 @JavascriptInterface 주석을 추가해야 합니다. 주석을 제공하지 않으면 Android 4.2 이상에서 실행할 때 웹 페이지에서 메소드에 액세스할 수 없습니다.

중국어 의미는

입니다.

경고: 프로그램이 플랫폼 17 이상을 대상으로 하는 경우 웹 페이지에서 호출할 수 있는 메서드에 @JavascriptInterface 주석 을 추가해야 합니다(이 메서드는 공개여야 함). 이렇게 하지 않으면 웹페이지가 플랫폼 4.2 이상에서 메서드에 액세스할 수 없습니다.

두 가지 솔루션
  • targetSdkVersion을 17 이상으로 설정하고 @JavascriptInterface 주석 도입

  • 주석 인터페이스 만들기 @JavascriptInterface라는 이름을 직접 지정한 다음 가져옵니다. 이 인터페이스는 혼동될 수 없습니다.

참고 @JavascriptInterface 코드 생성

public @interface JavascriptInterface {

}

코드 난독화 문제

난독화되지 않은 버전의 코드가 정상적으로 실행되면 난독화된 버전의 코드가 실행 오류가 발생하고 Uncaught TypeError: Object [object Object] has no method 메시지는 난독화 예외 처리를 수행하지 않았음을 의미합니다. 난독화 파일에 이와 유사한 코드를 추가하세요

-keep class com.example.javajsinteractiondemo$JsInteration {
    *;
}

모든 WebView 메소드는 동일한 스레드에서 호출되어야 합니다

필터 로그에서 이 문제를 발견했습니다.

E/StrictMode( 1546): java.lang.Throwable: A WebView method was called on thread &#39;JavaBridge&#39;. 
All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 1) {528712d4} called on Looper (JavaBridge, tid 121) {52b6678c}, 
FYI main Looper is Looper (main, tid 1) {528712d4})
E/StrictMode( 1546):   at android.webkit.WebView.checkThread(WebView.java:2063)
E/StrictMode( 1546):   at android.webkit.WebView.loadUrl(WebView.java:794)
E/StrictMode( 1546):   at com.xxx.xxxx.xxxx.xxxx.xxxxxxx$JavaScriptInterface.onCanGoBackResult(xxxx.java:96)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:27)
E/StrictMode( 1546):   at android.os.Handler.dispatchMessage(Handler.java:102)
E/StrictMode( 1546):   at android.os.Looper.loop(Looper.java:136)
E/StrictMode( 1546):   at android.os.HandlerThread.run(HandlerThread.java:61)

js 호출 이후의 Java 콜백 스레드는 기본 스레드가 아닙니다. 로그를 인쇄하면

ThreadInfo=Thread[WebViewCoreThread,5,main]

를 확인할 수 있습니다. 위 예외를 해결하려면 웹뷰 작업을 메인 스레드에 넣으면 됩니다.

아아아아


위 내용은 Android의 Java와 JavaScript 상호작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.