Android
WebView
수색…
소개
WebView 는 응용 프로그램 내부에 웹 페이지를 표시하는보기입니다. 이렇게하면 자신 만의 URL을 추가 할 수 있습니다.
비고
Android 매니페스트 파일에 권한을 추가하는 것을 잊지 마세요.
<uses-permission android:name="android.permission.INTERNET" />
WebView의 JavaScript 경고 대화 상자 - 작동 방식
기본적으로 WebView는 JavaScript 경고 대화 상자를 구현하지 않습니다. alert() 는 아무 것도하지 않습니다. 먼저 JavaScript (분명히 ..)를 활성화하고 페이지에서 경고 대화 상자에 대한 요청을 처리하도록 WebChromeClient 를 설정해야합니다.
webView.setWebChromeClient(new WebChromeClient() {
//Other methods for your WebChromeClient here, if needed..
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
여기서는 onJsAlert 를 재정의 한 다음 super 구현을 호출하여 표준 Android 대화 상자를 제공합니다. 예를 들어 사용자 정의 스타일 대화 상자를 만들거나 로그하려는 경우 메시지와 URL을 직접 사용할 수도 있습니다.
Javascript에서 Java (Android) 로의 통신
Android 활동
package com.example.myapp;
import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;
public class WebViewActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = new WebView(this);
setContentView(webView);
/*
* Note the label Android, this is used in the Javascript side of things
* You can of course change this.
*/
webView.addJavascriptInterface(new JavascriptHandler(), "Android");
webView.loadUrl("http://example.com");
}
}
Java Javascript Handler
import android.webkit.JavascriptInterface;
public class JavascriptHandler {
/**
* Key point here is the annotation @JavascriptInterface
*
*/
@JavascriptInterface
public void jsCallback() {
// Do something
}
@JavascriptInterface
public void jsCallbackTwo(String dummyData) {
// Do something
}
}
웹 페이지, 자바 스크립트 호출
<script>
...
Android.jsCallback();
...
Android.jsCallback('hello test');
...
</script>
추가 팁
복잡한 데이터 구조를 전달할 때 가능한 해결책은 JSON을 사용하는 것입니다.
Android.jsCallback('{ "fake-var" : "fake-value", "fake-array" : [0,1,2] }');
안드로이드 측면에서 좋아하는 JSON 파서를 사용하십시오 : JSONObject
Java에서 Javascript 로의 통신
기본 예제
package com.example.myapp;
import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;
public class WebViewActivity extends Activity {
private Webview webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
setContentView(webView);
webView.loadUrl("http://example.com");
/*
* Invoke Javascript function
*/
webView.loadUrl("javascript:testJsFunction('Hello World!')");
}
/**
* Invoking a Javascript function
*/
public void doSomething() {
this.webView.loadUrl("javascript:testAnotherFunction('Hello World Again!')");
}
}
다이얼러 예제 열기
웹 페이지에 전화 번호가 있으면 전화 걸기를 사용하여 전화를 걸 수 있습니다. 이 코드는 tel로 시작하는 url을 확인한 다음 전화 걸기의 의도를 만들고 클릭 한 전화 번호로 전화를 걸 수 있습니다.
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("tel:")) {
Intent intent = new Intent(Intent.ACTION_DIAL,
Uri.parse(url));
startActivity(intent);
}else if(url.startsWith("http:") || url.startsWith("https:")) {
view.loadUrl(url);
}
return true;
}
콘솔 메시지를 인쇄하거나 원격 디버깅을 통해 WebView 문제 해결
webcat 콘솔 메시지를 logcat에 인쇄 중
웹 페이지에서 console 메시지를 처리하려면 onConsoleMessage 의 WebChromeClient 재정의 할 수 있습니다.
final class ChromeClient extends WebChromeClient {
@Override
public boolean onConsoleMessage(ConsoleMessage msg) {
Log.d(
"WebView",
String.format("%s %s:%d", msg.message(), msg.lineNumber(), msg.sourceId())
);
return true;
}
}
그리고 당신의 활동이나 단편에 그것을 설정하십시오 :
webView.setWebChromeClient(new ChromeClient());
따라서이 샘플 페이지는 다음과 같습니다.
<html>
<head>
<script type="text/javascript">
console.log('test message');
</script>
</head>
<body>
</body>
</html>
logcat에 'test message'로그를 작성합니다.
WebView : 테스트 메시지 sample.html : 4
console.info() , console.warn() 및 console.error() 는 chrome-client에서도 지원됩니다.
Chrome으로 원격 디버깅하는 Android 기기
원격 데스크톱 크롬에서 Webview 기반 응용 프로그램을 원격 디버깅 할 수 있습니다.
Android 기기에서 USB 디버깅 사용 설정
Android 기기에서 설정을 열고 개발자 옵션 섹션을 찾은 다음 USB 디버깅을 사용 설정합니다.
Android 기기 연결 및 검색
다음 페이지의 크롬 페이지 열기 : chrome : // inspect / # devices
Inspect Devices 대화 상자에서 장치를 선택하고 inspect를 누릅니다. Chrome의 DevTools의 새로운 인스턴스가 개발 컴퓨터에 열립니다.
DevTools에 대한 자세한 지침과 설명은 developers.google.com 에서 찾을 수 있습니다.
로컬 파일 열기 / Webview에서 동적 컨텐트 만들기
Layout.xml
<WebView
android:id="@+id/WebViewToDisplay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:fadeScrollbars="false" />
WebViewToDisplay에 데이터로드
WebView webViewDisplay;
StringBuffer LoadWEb1;
webViewDisplay = (WebView) findViewById(R.id.WebViewToDisplay);
LoadWEb1 = new StringBuffer();
LoadWEb1.append("<html><body><h1>My First Heading</h1><p>My first paragraph.</p>");
//Sample code to read parameters at run time
String strName = "Test Paragraph";
LoadWEb1.append("<br/><p>"+strName+"</p>");
String result = LoadWEb1.append("</body></html>").toString();
WebSettings webSettings = webViewDisplay.getSettings();
webSettings.setJavaScriptEnabled(true);
webViewDisplay.getSettings().setBuiltInZoomControls(true);
if (android.os.Build.VERSION.SDK_INT >= 11){
webViewDisplay.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webViewDisplay.getSettings().setDisplayZoomControls(false);
}
webViewDisplay.loadDataWithBaseURL(null, result, "text/html", "utf-8",
null);
//To load local file directly from assets folder use below code
//webViewDisplay.loadUrl("file:///android_asset/aboutapp.html");