Android WebView 에서 자바 스 크 립 트 와 자바 의 상호작용 실현

사실 웹 뷰 가 자원 을 불 러 오 는 속 도 는 느 리 지 않 지만 자원 이 많 으 면 당연히 느 립 니 다.그림,css,js,html 등 자원 은 각각 10-200 ms 가 필요 하고 보통 30ms 면 ok 입 니 다.그러나 웹 뷰 는 모든 자원 이 불 러 올 때 까지 기 다 려 야 렌 더 링 을 할 수 있 기 때문에 불 러 오 는 속도 가 중요 합 니 다!Google 에서 알 수 있 듯 이 웹 뷰 에서 페이지 를 불 러 오 는 순 서 는 html 를 불 러 온 다음 css,js 파일,페이지 의 이미지 자원 을 분석 하여 불 러 오 는 것 입 니 다.웹 키 트 의 캐 시 에 있 으 면 불 러 오지 않 습 니 다.이 자원 을 불 러 온 후 css 렌 더 링 과 js 를 실행 합 니 다.Css 의 렌 더 링 은 보통 오래 걸 리 지 않 고 몇 십 밀리초 만 에 ok 입 니 다.관건 은 js 의 집행 이다.jQuery 를 사용 하면 5-6 초가 걸린다.그 동안 웹 뷰 에 배경 을 설정 하지 않 으 면 웹 페이지 부분 이 흰색 이어서 보기 흉 하 다.이것 은 매우 나 쁜 사용자 체험 이다.그 러 니 웹 레이아웃 프로그램 을 사용 하면 방대 한 js 프레임 워 크 를 사용 하지 않 는 것 이 좋 습 니 다.네 이 티 브 js 를 사용 하여 업무 스 크 립 트 를 작성 하여 로드 속 도 를 높이 고 사용자 체험 을 개선 하 는 것 이 좋 습 니 다.
하 이브 리드 개발 에 서 는 카메라 호출,앨범 보기,녹음 등 안 드 로 이 드 네 이 티 브 SDK 를 사용 하기 도 한다.이 는 웹 페이지 의 자 바스 크 립 트 가 안 드 로 이 드 SDK 인터페이스 로 호출 될 수 있어 야 한다.Android 의 WebView 는 webkit 커 널 을 기반 으로 하 는 것 이기 때문에 js 와 자바 가 서로 조 정 된 인터페이스 함 수 를 통합 하여 편리 하 게 개발 하여 사용 할 수 있 습 니 다.
인터페이스 레이아웃 xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/linearLayout"
/>
<LinearLayout 
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java  JavaScript  "
>
</Button>
</LinearLayout>
</RelativeLayout> 

자바 코드:

private WebView webView;
private Handler handler = new Handler();
private Button button;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
//   webView  
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new MyJavaScriptInterface(MainActivity.this), "javaInterface");
//     ，javaScript  alert       ，   
webView.setWebChromeClient(new WebChromeClient());
//webView.setWebChromeClient(new MyWebChromeClient());
//  webView      
//webView.loadUrl("http://www.baidu.com/");
webView.setWebViewClient(new HelloWebView());
webView.loadUrl("file:///android_asset/index.html");
button = (Button) findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String param = "bb";
webView.loadUrl("javascript:showTitle('"+param+"')");
}
});
}
private class HelloWebView extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
return true;
} 
}
/**
*        JavaScript         
* @author CHQ
* API   ，     java        @JavascriptInterface
*/
public class MyJavaScriptInterface{
private Context context;
public MyJavaScriptInterface(Context context){
this.context = context;
}
@JavascriptInterface
public String toString() {
return "this is interface";
}
@JavascriptInterface
public void clickOnAndroid() {
Toast.makeText(context, "js    ：....", Toast.LENGTH_SHORT).show();
}
/**
*     JS  ，        
*/
@JavascriptInterface
public void call() {
Toast.makeText(context, "        JavaScript  ", Toast.LENGTH_SHORT).show();
handler.post(new Runnable() { 
@Override
public void run() {
String param = "bb";
webView.loadUrl("javascript:showTitle('"+param+"')");
}
});
}
}

그 중에서 몇 가지 주의해 야 할 것 이 있 는데 인터넷 초기 에 WebView 에 대한 설명 에서 몇 가지 변화 가 있 었 다.1)안 드 로 이 드 4.2 이상 버 전에 서 WebView 를 사용 하여 자바 와 Js 의 상호 조정 을 실현 하고 자바 인 터 페 이 스 는@JavascriptInterface 를 성명 해 야 합 니 다.2)WebView 는 Js 등 팝 업 창 등에 적응 하기 위해 setWebChromeClient()를 호출 해 야 한다.3)addJavascriptInterface 에 연 결 된 인터페이스 에서 JavaScript 인 터 페 이 스 를 호출 하려 면 하위 스 레 드 를 열 어 호출 해 야 합 니 다(오류 보고:Caused by:java.lang.Throwable:A WebView method was called on thread'JavaBridge'.All WebView methods must be called on the same thread.);
HTML 코드:

<html>
<script type="text/javascript">
//       1
function callAndroidInterface() {
window.javaInterface.clickOnAndroid();
}
//
function showTitle(param) {
alert("  ："+param);
var x = document.getElementById("title");
alert("  ："+x.innerHTML);
}
</script>
<body>
<h3 id="title">     JavaScript   </h3>
<input type="button" value="    1" onclick="callAndroidInterface()"></input> 
<input type="button" value="       " onclick="showTitle('aa')"></input> 
<input type="button" value="    2" onclick="window.javaInterface.call()"></input>
</body>
</html> 

이상 html 파일,그 중에서 자바 인터페이스 는 webView 에서 addJavacriptInterface()방법 에 주 입 된 인터페이스 입구 이름 입 니 다.이 이름 을 통 해 자바 의 인 터 페 이 스 를 직접 호출 할 수 있 습 니 다.(이 html 페이지 는 프로젝트 assets 디 렉 터 리 에 유지 해 야 합 니 다.webView.loadUrl("file:///android_asset/index.html")로 불 러 오기;
효과 그림:

그 중에서 대화 상자 가 팝 업 됩 니 다.사이트 주소 가'file://'인 웹 페이지 는 서버 의 웹 페이지 라면 원본 IP 주소 등 을 표시 합 니 다.분명히 우리 가 원 하 는 것 이 아 닙 니 다.다음 편 에 서 는 대화 상자,확인 상자 등 웹 뷰 의 최 적 화 를 수정 하기 위해 웹 크롬 클 라 이언 트 를 다시 쓸 수 있 습 니 다.
이상 의 내용 은 안 드 로 이 드 웹 뷰 에서 자바 스 크 립 트 와 자바 의 상호작용 을 실현 하 는 모든 내용 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!