Android加载本地页，并与js互调详解

来源：互联网发布：天文软件stellarium 编辑：程序博客网时间：2024/06/04 00:31

闲来无事，整理的小demo,希望可以帮助到大家。
step1：布局文件 activity_main.xml

<?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.gtibee.myjs.MainActivity">    <Button        android:id="@+id/btn_user_js"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="Android调js代码"/>    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="wrap_content"></WebView></LinearLayout>

step2:html页 demo.html

<html><head>    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">    <script type="text/javascript">    function javacalljs(){//android方法调用该方法        document.getElementById("content").innerHTML +="<br\>Android里的java方法调用了js方法（无参）";    }    function javacalljswithargs(arg){//android方法调用该方法，并传参数        document.getElementById("content").innerHTML += ("<br\>"+arg+"（有参）");    }    function backNoClick(){            window.myway.showAndroidContent();     }    </script></head><body style="font-size:15px">    以下全是网页内容： <br/>    <input type="button" onclick="backNoClick()" value="点击按钮调用Android里的showAndroidContent方法">    <br/>    <div id="content">显示JS调用Android方法的列表：</div></body></html>

step3：主函数 MainActivity.java

public class MainActivity extends AppCompatActivity {    private Button btnUserJs;    private WebView mWebView;    private Context mContext;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initWeb();    }    private void initWeb() {        //设置编码        mWebView.getSettings().setDefaultTextEncodingName("utf-8");        // 启用javascript  （支持js）        mWebView.getSettings().setJavaScriptEnabled(true);        //设置背景颜色 透明        mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));        //设置本地调用对象及其接口        //"myway"这个名称可以自定义，只要保证与html中调用该方法的前缀相同即可（window.myway.showAndroidContent()）        mWebView.addJavascriptInterface(new JavaScriptinterface(mContext),"myway");        //载入js        mWebView.loadUrl("file:///android_asset/demo.html");//加载本地静态页    }    private void initView() {        btnUserJs= (Button) findViewById(R.id.btn_user_js);        mWebView= (WebView) findViewById(R.id.webview);        btnUserJs.setOnClickListener(new OnCLick());        mContext=getApplicationContext();    }    private class OnCLick implements View.OnClickListener {        @Override        public void onClick(View v) {            switch (v.getId()){                case R.id.btn_user_js:                    mWebView.loadUrl("javascript:javacalljs()");//调用js代码                    String a="1234567890";                    mWebView.loadUrl("javascript:javacalljswithargs("+a+")");//调用js代码，并传递参数                    break;            }        }    }    private class JavaScriptinterface {        Context context;        public JavaScriptinterface(Context c) {            context = c;        }        /**         * 与js交互时用到的方法，在js里直接调用的         *         */        @JavascriptInterface        public void showAndroidContent() {            //"showAndroidContent"方法名可自定义，只要保证与html中方法名称相同即可（window.myway.showAndroidContent())            Toast.makeText(context,"这是安卓代码：JS调用Android代码", Toast.LENGTH_LONG).show();        }    }}

注意事项

mWebView.addJavascriptInterface(new JavaScriptinterface(mContext),"myway");
代码中，”myway”这个名称可以自定义，只要保证与html中window.myway.showAndroidContent()这个方法的前缀”myway”相同即可。
public void showAndroidContent(){}
代码中，”showAndroidContent”这个方法名可自定义，只要保证与html中window.myway.showAndroidContent()方法名称“showAndroidContent()”相同即可。
@JavascriptInterface 这个必须加上，否则调用不到。

源码下载

http://download.csdn.net/download/qq_34947883/9980397

阅读全文

0 0