AndroidとJs呼び出し
18488 ワード
随着html5的发展,android原生应用与h5的结合已经越来越多。android js 也变得越来越频繁。啦啦啦,今天就来写一个简单的列子记录记录。
实列
我们新建一个项目JSBridge。
1.编写activity_main。
xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.jokerchan.jsbridge.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/clickjs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="android js"
android:textColor="#000000" />
<EditText
android:id="@+id/showjs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/clickjs"
android:hint=" " />
RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
>
<EditText
android:id="@+id/jsshow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="16sp"
android:editable="false"
android:hint=" JS android "
/>
RelativeLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
LinearLayout>
レイアウトファイルは簡単で、主にボタンと表示の部分であり、その中で最も重要なのはwebviewがウェブページの内容を表示するために使用されています.
2.ローカルhtmlファイルの作成joker.htmlを構築し、簡単なhtmlの内容を以下のように記述します.
<html xmlns="http://www.w3.org/1999/html">
<head>
head>
<body>
<script>
//js android
function jsGetAndroid(){
var msg = androidjs.showInfoFromJs("I'M FROM JS!!!");
document.getElementById("androidgetjs").innerHTML=msg;
}
//android js
function androidGetJs(msg){
document.getElementById("androidgetjs").innerHTML=" Android ："+msg;
}
script>
<button id="jsgetandroid" onclick="jsGetAndroid()"> android button>
br>
<div id="androidgetjs">div>
br>
<div id="fromandroid">div>
body>
html>
いくつかの表示コントロールと2つのjs関数が含まれていますが、これも説明しません.会htmlの人は一目でわかります.
3.activityのコードを作成します./**
* android JS
*
* @author jokerchan
* @version 1.0
* @since 2016 4 14 14:53:51
* SuppressLint ！！！
* ， JS Android
*/
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends AppCompatActivity {
private WebView webview;
EditText showjs;
EditText jsshow;
Button clickjs;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webview);
showjs = (EditText) findViewById(R.id.showjs);
jsshow = (EditText) findViewById(R.id.jsshow);
clickjs = (Button) findViewById(R.id.clickjs);
webview.getSettings().setDefaultTextEncodingName("utf-8");
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs");
webview.loadUrl("file:///android_asset/joker.html");
clickjs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String msg = showjs.getText().toString().trim();
webview.loadUrl("javascript:androidGetJs('" + msg + "')");
}
});
}
public class JavaScriptInterface {
Context context;
JavaScriptInterface(Context context) {
this.context = context;
}
// js androidjs.showInfoFromJs("I'M FROM JS!!!")
@JavascriptInterface
public String showInfoFromJs(final String name) {
runOnUiThread(new Runnable() {
@Override
public void run() {
jsshow.setText(name);
}
});
return "I'M FROM ANDROID!!!";
}
}
}
その中で注意@SuppressLint("SetJavaScriptEnabled")は必ず加えて、以前プロジェクトをしていたときも穴があいたことがあります.
Android呼び出しJs
まずwebview について.// utf-8
webview.getSettings().setDefaultTextEncodingName("utf-8");
// javascript
webview.getSettings().setJavaScriptEnabled(true);
// js
webview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs");
// html
webview.loadUrl("file:///android_asset/joker.html");
次に,htmlにおいてjsの方法を定義した.情報を表示するdivと //android js
function androidGetJs(msg){
document.getElementById("androidgetjs").innerHTML=" Android ："+msg;
}
"androidgetjs">div>
edittext js
clickjs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String msg = showjs.getText().toString().trim();
webview.loadUrl("javascript:androidGetJs('" + msg + "')");
}
});
webview.loadUrl("javascript:androidGetJs('" + msg + "')")の な でjsの の を び すことができるのが えます.javascript:の に くandroidGetJsがjsで されている です. に、androidが した を のようにdivに した.
JsがAndroidを び す
このコードwebview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs")の にJavaScriptInterfaceオブジェクトがあります. ろに グループandroidjsがあります.このandroidjsは、jsでandroidメソッドが び されるのを っているときに されます.そうしないと、メソッドが つかりません.JavaScriptInterfaceの を てみましょうpublic class JavaScriptInterface {
Context context;
JavaScriptInterface(Context context) {
this.context = context;
}
// js androidjs.showInfoFromJs("I'M FROM JS!!!")
@JavascriptInterface
public String showInfoFromJs(final String name) {
runOnUiThread(new Runnable() {
@Override
public void run() {
jsshow.setText(name);
}
});
return "I'M FROM ANDROID!!!";
}
}
jsがandroidメソッドを び すので、uiスレッドはなくなります.だから の にrunOnUiThreadを いました.ここで、showInfoFromJsは、jsで び される である. の に@JavascriptInterfaceをつけてください.そしてjsコードを ています.//js android
function jsGetAndroid(){
var msg = androidjs.showInfoFromJs("I'M FROM JS!!!");
document.getElementById("androidgetjs").innerHTML=msg;
}
"androidgetjs">div>
js androidjs.showInfoFromJs("I'M FROM JS!!!") android 。 androidjs java 。 。 showInfoFromJs div 。
：
manifest 。
android js 。
： JOKER
：https://www.jianshu.com/p/cb928de89d49
：
。 ， 。