Android和Html的简单交互

---恢复内容开始---

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

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

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

 

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

<!doctype html>
<html>
<head>
    <!-- 设置当前HTML文件的字符编码 -->
    <meta charset="utf-8">
    <!-- 设置浏览器的兼容模式版本 （让IE使用最新的渲染引擎工作） -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 声明当前网页在移动端浏览器中展示的相关设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <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代码" onclick="window.android.startFunction()" />
<br/>
<input type="button"  value="调用android代码并传递参数" onclick="window.android.startFunction('这里是js调用Android方法')"  />
</body>
</html>

 　　 <2> Main布局只有一个webview

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="myapplication.com.myhtml.MainActivity">


    

    <WebView

        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

 

   　<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();

            }
        });


    }
}

 

其实现效果图：

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代码" onclick="window.android.startFunction()" />
<br/>
<input type="button"  value="点击调用java代码并传递参数" onclick="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方法'" + ")");
　　　　　　　　　　// String msg = "这里调用js的方法";
 　　　　　　　　　// contentWebView.loadUrl("javascript:javacalljswith(" + "'这里调用js的方法'" + ")");
　　　　　　　　　　// contentWebView.loadUrl("javascript:javacalljswith('" + msg + "')");


            }
        });


    }

 实现图如下：

4.code      

http://pan.baidu.com/s/1pK9u7MV   工作--新文件--myhtml

 

posted @ 2017-03-06 18:04  咖喱不见不散啊  阅读(8488)  评论(0)  编辑  收藏  举报