android webview与js交互

来源：互联网发布：淘宝上卖什么的最少编辑：程序博客网时间：2024/05/17 04:41

webview与js交互可分为：webview调用js，及js调用webview

webview调用js

1 webview加载网页。

webview.loadUrl(url);

2.webview调用网页方法

webview.loadUrl("javascript:function()");

js调用webview

1.webview加载网页

webview.loadUrl(url);

2.定义JavascriptInterface的接口类

3.webview添加JavascriptInterface

//这里的object就是上一步定义的JavascriptInterface类，name就是你js里边调用的标识webviewMain.addJavascriptInterface(Object object, String name);

下边给出完整代码

activity_main.xml
这个就不用多说了

<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:gravity="center_horizontal"    android:orientation="vertical"    tools:context="com.yxdong.learn.MainActivity">    <Button        android:id="@+id/btn_main"        android:text="加"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <WebView        android:id="@+id/webview_main"        android:layout_width="match_parent"        android:layout_height="match_parent"></WebView></LinearLayout>

JavaScriptInterface.java
这里直接使用的JavaScriptInterface命名的js接口类
这个类我写的很简单，
注意注意注意！！！重要的事情说三遍
@JavascriptInterface 不能少否则没有效果，不写编译器也不会报错

public class JavaScriptInterface {    Context mContext;    public JavaScriptInterface(Context context){        mContext=context;    }//注意注意注意！！！重要的事情说三遍//@JavascriptInterface 不能少否则没有效果//这里就做了一个现实Toast的效果    @JavascriptInterface    public void showToast(){        Toast.makeText(mContext, "I have dream", Toast.LENGTH_SHORT).show();    }}

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private Button btnMain;    private WebView webviewMain;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        btnMain = (Button) findViewById(R.id.btn_main);        webviewMain = (WebView) findViewById(R.id.webview_main);        btnMain.setOnClickListener(this);        //设置支持javascript        webviewMain.getSettings().setJavaScriptEnabled(true);        //加载网页，这里在asset目录下放置了一个网页        webviewMain.loadUrl("file:///android_asset/test.html");        //添加javascriptinterface 接口 通过该接口js就能访问接口类里的方法了         //Android  是一个标识，可以随意自定义， 在js里通过该标识来访问接口类里的方法            webviewMain.addJavascriptInterface(new       JavaScriptInterface(this),"Android");    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.btn_main:            //调用js里边的方法,每次点击webview上都会加1            //"javascript:" 是固定写法                webviewMain.loadUrl("javascript:add()");                break;        }    }}

test.html

<!DOCTYPE html><html><head>    <title>android webview与js交互</title></head><body><p>计数</p><p id="number">0</p><button onclick="showToast()">显示系统Toast</button> <script type="text/javascript">    var i=0;    function add() {        document.getElementById('number').innerHTML=++i;    }    function showToast() {        Android.showToast();    }</script></body></html>

阅读全文

0 0