안드로이드 android 안드로이드 webview 자바스크립트 연동 관련

 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: http://sumi3360.blogspot.kr/2014/12/android_52.html

[android] 자바스크립트에서 함수 호출 및 자바스크립트 호출하기

 

[자바스크립트에서 안드로이드 함수 호출]

 

1. 인터페이스 클래스 생성

targetSdkVersion을 17이상이면 @JavascriptInterface를 꼭 추가해야한다.

추가하지 않으면 함수가 동작하지 않는다.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

public class WebAppInterface {     Context mContext;       /** Instantiate the interface and set the context */     WebAppInterface(Context c) {         mContext = c;     }       /** Show a toast from the web page */     @JavascriptInterface     public void showToast(String toast) {         Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();     } }

 

2. 웹뷰 생성 및 인터페이스 등록

 

1 2 3 4 5 6 7

WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new WebAppInterface(this), "Android");   WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true);   mWebView.loadUrl("file:///android_asset/testjavascript.html");

 

 

3. html파일에서 WebAppInterface클래스의 showToast함수 호출.

 

1 2 3 4 5 6 7

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />   <script type="text/javascript">     function showAndroidToast(toast) {         Android.showToast(toast);     } </script>

 

 

4. Say hello버튼을 누르게 되면 'Hello Android!라는 토스트 메시지를 띄우게 된다.

 

 

[안드로이드에서 자바스크립트 함수 호출]

 

1. 안드로이드에서 호출

WebView명.loadUrl("javascript:함수명()");

 

1	mWebView.loadUrl("javascript:setViewAndroid()");

 

 

2. html파일 자바스크립트 함수 생성

 

1 2 3 4 5

<script type="text/javascript">     function setViewAndroid() {         // 내용     } </script>

[proguard 적용시 제대로 작동하지 않는다면!?]

아래의 내용을 추가해보자.

1 2 3

-keepclassmembers class * {     @android.webkit.JavascriptInterface <methods>; }

 

 

 

 

=================================

=================================

=================================

 

 

 

 

출처: http://ironnip.tistory.com/4

 

안드로이드 웹뷰 간 함수호출 (AndroidBridge)

 

웹뷰 기반의 안드로이드 앱을 개발할 때 웹뷰 내 자바스크립트에서 네이티브 함수를 호출하거나

네이티브에서 웹뷰 내 자바스크립트 함수를 호출해야할 때가 있다. 단순하지만 매번 사용해오는 부분

 

1. Javascript 허용 및 JavascriptInterface 추가

 - 웹뷰를 초기세팅하는 부분에서 사용

 

WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);  //자바스크립트 허용
webview.addJavascriptInterface(new AndroidBridge(), "MyApp");

2. AndroidBridge 클래스 작성

 - 호출되는 메소드의 파라미터는 여러개도 허용하지만 final 이어야 한다

 

private class AndroidBridge {
 
    public void getJavascriptMessage(final String msg){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Log.e(TAG,"Webview Message :: " + msg);
            }
        });
    }
}

 

3. 자바 스크립트에서 호출하는 방식 (JAVASCRIPT -> ANDROID)

 - '1' 에서 추가해준 JavascriptInterface 이름과 '2' 에서 작성한 메소드의 이름

 

window.MyApp.getJavascriptMessage("JAVASCRIPT -> ANDROID CALL!!");

 

4. 자바스크립트를 호출하는 방식 (ANDROID -> JAVASCRIPT)

 - 웹뷰에 띄워진 페이지 내에 getAndroidMessage(msg) 함수가 정의되어있다고 가정한다

 

 

 

 

 

반응형

 

 

728x90

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://veryeasyandroid.blogspot.kr/2015/08/webview-javascript-android.html

WebView 사용 예 (JavaScript <> Android 연동), 이미지 다운로드 기능

 

1. Activity의 Layout 정의
WebView를 배치

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:textAlignment="center" >      <LinearLayout         android:id="@+id/adSpace"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:gravity="bottom"         android:orientation="horizontal" />      <LinearLayout         android:id="@+id/btnSpace"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_above="@+id/adSpace"         android:gravity="bottom"         android:orientation="horizontal" >          <Button             android:id="@+id/btn"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:text="Hey"             android:gravity="bottom"             android:orientation="horizontal" >         </Button>     </LinearLayout>      <WebView         android:id="@+id/webView1"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@+id/btnSpace"         android:layout_centerHorizontal="true"         android:layout_marginBottom="1dp" />  </RelativeLayout> 

2. Activity Java 파일 작성 

public class JavaScriptActivity extends Activity {   //전역으로 WebView 타입의  변수 선언  private WebView webView;   @Override   public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   requestWindowFeature(Window.FEATURE_NO_TITLE);   setContentView(R.layout.web_view_activity);    //다른 Activity에서 넘겨준 데이터 가져오기.WebView에 load할 url   String url = getIntent().getStringExtra("url");    //Layout에서 WebView가져오기   webView = (WebView)findViewById(R.id.webView1);      //다양한 WebView 설정들   WebSettings settings = webView.getSettings();   settings.setJavaScriptEnabled(true);   settings.setSaveFormData(false);   //settings.setSupportZoom(true);   //settings.setBuiltInZoomControls(true);    //JavaScript와 AndroidNative와의 연결고리 설정   webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");   webView.setWebChromeClient(new ChromeClient());    //asset에 있는 url을 webview에서 오픈한다.   String resourceURI = "file:///android_asset/1.html";      if (!url.isEmpty()) {    resourceURI = "file:///android_asset/"+url;   }      webView.loadUrl(resourceURI);    //안드로이드의 버튼을 클릭하면 html문서 상의 javascript함수를 호출하는 예제.   Button btn = (Button)findViewById(R.id.btn);   btn.setOnClickListener(new OnClickListener() {    @Override    public void onClick(View v) {     webView.loadUrl("javascript:setText('change text')");    }   });  }     @Override   public void onBackPressed () {   //뒤로 가기 버튼을 클릭했을 시, 브라우저 history상 이전 페이지로 가도록    if (webView.canGoBack()) {    webView.goBack();   }   else    super.onBackPressed();  }    //asset에 있는 파일을 사용자의 sdcard에 저장하는 함수  public void saveFileFromAsset(String filePathInAsset, String targetPathInSDCard) {   AssetManager assetManager = getAssets();    InputStream in = null;   OutputStream out = null;   try {    in = assetManager.open(filePathInAsset);   // if files resides inside the "Files" directory itself    out = new FileOutputStream(Environment.getExternalStorageDirectory().toString() + targetPathInSDCard + filePathInAsset);    copyFile(in, out);    in.close();    in = null;    out.flush();    out.close();    out = null;            //sd카드에 파일을 쓴 후, 시스템에 알려줘야 한다.     final String outputPath = Environment.getExternalStorageDirectory().toString() + targetPathInSDCard + filePathInAsset;     MediaScannerConnection.scanFile(JavaScriptActivity.this,       new String[] { outputPath.toString() },       null,      new MediaScannerConnection.OnScanCompletedListener() {       public void onScanCompleted(String path, Uri uri) {        Toast.makeText(getApplicationContext(),           "Image downloaded on \n" + outputPath,           Toast.LENGTH_SHORT).show();     }    });   } catch(Exception e) {    Log.e("tag", e.getMessage());   }  }    private void copyFile(InputStream in, OutputStream out) throws IOException {   byte[] buffer = new byte[1024];   int read;   while((read = in.read(buffer)) != -1){    out.write(buffer, 0, read);   }  }   public class JavaScriptInterface {       Context context = null;    JavaScriptInterface(Context aContext)    {            context = aContext;       }    //HTML 문서 내에서 JavaScript로 호출가능한 함수   //브라우저에서 load가 완료되었을 때 호출하는 함수   @JavascriptInterface   public void onload() {    Toast.makeText(getApplicationContext(),       "JavaScript onLoad",       Toast.LENGTH_SHORT).show();   }    //HTML 문서 내에서 JavaScript로 호출가능한 함수   //asset의 파일을 로컬에 저장    @JavascriptInterface   public void saveFile(String path) {    saveFileFromAsset(path, "/Pictures/KakaoTalk/");   }  }   public final class ChromeClient extends WebChromeClient {   @Override   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {    result.confirm();    return true;   }  }  } 

3. asset에 html 파일 배치하기 (1.html)

 

<html> <head>  <script>   window.onload = function() {   Android.onload();  };   function saveImage(filename) {   Android.launch(filename);  };    function setText(change) {   var textArea = document.getElementById('text');   textArea.innerHTML = change;  };  </script> </head>  <body>  <div id ='text'>   This is hawaii  </div>    <input id="b1"      type="button"       value="Save Image"       onClick="saveImage('hawaii.png')" />    <img id="myimg"        src="hawaii.png" />     </body> </html>

4. androidManifest.xml에 권한 설정

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" /> 

 

작성자: reapsow 시간: 오후 7:12 

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://mrgamza.tistory.com/178

 

WebView를 이용하여서, WebApp을 개발할 경우에,

안드로이드의 여러가지 기능들을 호출하여서 사용하고 싶을 경우가 발생합니다.

 

이럴 경우에 사용할수 있는것이 javascript에서 App의 메소드를 바로 호출하는 방식인데요.

너무 간단하게 사용을 할수 있습니다.

 

1. 자바스크립트 호출되어지는 클래스 만들기

 

자바스크립트에서 이름으로 호출하면 바로 호출되는 클래스를 만들겁니다.

방식은 일반 클래스를 만드는 방식과 동일하며, Annotation만 추가하여 주면 됩니다. (예전 버전에서는 안그랬는데, 4.2부터는 안넣어주면 오류 납니다. 주의하세요.)

다음과 같이 만들어줍니다.

 

private class JavaScriptInterface {

 

@JavascriptInterface

public void onPageOpen(final String url) {

 

mHandler.post(new Runnable() {

 

public void run() {

if(mWebView != null) {

mWebView.loadUrl(url);

}

}

}

}

}

 

2. WebView에 클래스를 스크립트 Interface로 등록

 

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.addJavaScriptInterface(new JavaScriptInterface(), "AndroidInterface");

 

3. JavaScript에서 호출 방식

 

위에서 지정한 이름이 AndroidInterface이므로 이렇게 호출하여 줍니다.

window.AndroidInterface.onPageOpen("mrgamza.tistory.com");

 

4. WebPage의 script를 단말에서 호출하는 방식

 

mWebView.loadUrl("javascript:[script 이름];");

 

예를 들어 foo라는 함수를 호출하고 싶다면

 

mWebView.loadUrl("javascript:foo();");

 

너무 간단해서 추가 설명은 하지 않겠습니다.

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: https://www.fun25.co.kr/blog/android-webview-javascript-webappinterface/?category=003

 

[안드로이드] 웹뷰에서 자바스크립트로 네이티브 코드 호출

 

안드로이드 웹뷰에서 자바스크립트를 이용해서 네이티브 코드를 호출하는 방법입니다.

아래와 같이 WebAppInterface 라는 클래스를 액티비티의 내부 클래스로 만듭니다.

public class MainActivity extends AppCompatActivity { ... public class WebAppInterface {     Context mContext;      WebAppInterface(Context c) {         mContext = c;     }      @JavascriptInterface     public void showToast(String toast) {         Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();     } ... } }  webView 인스턴스에 자바스크립트 인터페이스를 셋팅해 줍니다. 파라미터 중 Android 라는 스트링은 웹뷰에서 호출 시 사용되는 명칭입니다.  webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new WebAppInterface(this), "Android"); 

웹뷰의 웹 페이지에서는 스크립트로 아래와 같이 호출합니다.

<script>     Android.showToast("안녕하세요."); </script>

 

 

=================================

=================================

=================================