android webview与js交互-蒲公英云

android webview与js交互

傷城~ 2022-06-15 00:24 373阅读 0赞

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>