android webview与js交互

傷城~ 2022-06-15 00:24 345阅读 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**  
这个就不用多说了

--------------------

**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>