Android和Html的简单交互

偏执的太偏执、 2022-05-14 00:04 152阅读 0赞

**1.通过WebView加载Html界面。在android studio中html放在assets中。**

![969154-20170306155914438-1080420144.png][]

但是默认的并不存在这个文件夹，创建过程是

![969154-20170306155955547-1344260802.png][]

**2.创建后简单实现下，js调用android中的方法。****通****过οnclick="window.android.startFunction()" window.android.方法名 调用android方法**

<1>创建html文件 橘黄色为适配手机屏幕代码

<!doctype html>
    <html>
    <head>
        
        <meta charset="utf-8">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    </head>
    <body>
    这里是HTML <br/>
    <h1><div id="content">HTML内容显示</div></h1>
    <br/>
    <input type="button"  value="调用android代码" οnclick="window.android.startFunction()" />
    <br/>
    <input type="button"  value="调用android代码并传递参数" οnclick="window.android.startFunction('这里是js调用Android方法')"  />
    </body>
    </html>

<2> Main布局只有一个webview

<3>Main代码

public class MainActivity extends AppCompatActivity {
        private WebView contentWebView = null;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            contentWebView = (WebView) findViewById(R.id.webview);
            // 启用javascript
            contentWebView.getSettings().setJavaScriptEnabled(true);
            // 从assets目录下面的加载html
            contentWebView.loadUrl("file:///android_asset/b.html");
            contentWebView.addJavascriptInterface(MainActivity.this,"android");
    
    
        }
    
        //由于安全原因 需要加 @JavascriptInterface
        @JavascriptInterface
        public void startFunction(){
    
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(MainActivity.this,"Toast",Toast.LENGTH_SHORT).show();
    
                }
            });
        }
    
        @JavascriptInterface
        public void startFunction(final String text){
            runOnUiThread(new Runnable() {
    
                @Override
                public void run() {
                    new AlertDialog.Builder(MainActivity.this).setMessage(text).show();
    
                }
            });
    
    
        }
    }

**其实现效果图：**

![969154-20170306210751969-645103745.jpg][]![969154-20170306210952953-293734759.jpg][]

**3 android 调用html js方法  **

**　<1> Html文件如下，script中有二个方法，共android中调用。**

<html>
    <head>
    <meta http-equiv="Content-Type"    content="text/html;charset=gb2312">
    <script type="text/javascript">
    
    function javacalljs(){
         document.getElementById("content").innerHTML =
             "<br\>JAVA调用了JS的无参函数";
    }
    
    function javacalljswith(arg){
         document.getElementById("content").innerHTML =
             ("<br\>"+arg);
    }
    </script>
    </head>
    <body>
    这里是HTML  <br/>
    <h1><div id="content">内容显示</div></h1>
    <br/>
    <input type="button"  value="点击调用java代码" οnclick="window.android.startFunction()" />
    <br/>
    <input type="button"  value="点击调用java代码并传递参数" οnclick="window.android.startFunction('http://blog.csdn.net/Leejizhou')"  />
    </body>
    </html>

**<2>通过webView.loadUrl("javascript:方法名"); 来调用js中的方法。**

public class MainActivity extends AppCompatActivity {
        private WebView contentWebView = null;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            contentWebView = (WebView) findViewById(R.id.webview);
            // 启用javascript
            contentWebView.getSettings().setJavaScriptEnabled(true);
            // 从assets目录下面的加载html
            contentWebView.loadUrl("file:///android_asset/b.html");
            contentWebView.addJavascriptInterface(MainActivity.this,"android");
    
    
            //无参调用Js点击
            findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 无参数调用
                    contentWebView.loadUrl("javascript:javacalljs()");
    
                }
            });
            //有参调用Js点击
            findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 传递参数调用
                    contentWebView.loadUrl("javascript:javacalljswith(" + "'这里是调用js方法'" + ")");
                }
            });
    
    
        }

实现图如下：

![969154-20170306211725797-1430505320.png][]![969154-20170306211733297-11871564.png][]

[969154-20170306155914438-1080420144.png]: /images/20220514/506482093a85425fa10846c0822b7f60.png
[969154-20170306155955547-1344260802.png]: /images/20220514/3d2210d8723a44d2b53f051b7b070d75.png
[969154-20170306210751969-645103745.jpg]: https://images2015.cnblogs.com/blog/969154/201703/969154-20170306210751969-645103745.jpg
[969154-20170306210952953-293734759.jpg]: /images/20220514/99fff786effc4e90903f02f9e6cf1b61.png
[969154-20170306211725797-1430505320.png]: https://images2015.cnblogs.com/blog/969154/201703/969154-20170306211725797-1430505320.png
[969154-20170306211733297-11871564.png]: /images/20220514/fa312c8e983a4ca1ac01bf280088024b.png