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

最新推荐文章于 2024-05-15 09:37:41 发布

王小二1204

最新推荐文章于 2024-05-15 09:37:41 发布

阅读量914

点赞数

分类专栏： Android 文章标签： android js 互调

本文链接：https://blog.csdn.net/qq_34947883/article/details/77990527

版权

Android 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

闲来无事，整理的小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" "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

王小二1204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android加载本地页，并与js互调详解

闲在无事，整理的小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.an
复制链接

扫一扫

专栏目录