WebView--安卓与HTML的交互

来源：互联网发布：外贸crm软件编辑：程序博客网时间：2024/04/30 08:21

1，Android与HTML交互有2种情况

1.Android 调用 HTML

2.HTML 调用 Android,

2，步骤

1.设置允许执行JS脚本：
webView.getSettings().setJavaScriptEnabled(true);

mWebview.loadUrl("file:///android_asset/index.html");

2.添加通信接口
webView.addJavascriptInterface(Interface,”InterfaceName”)

3. JS调用Android
InterfaceName.MethodName

4. Android调用JS
webView.loadUrl("javascript:functionName()");

3，XML

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:orientation="vertical"    android:layout_height="match_parent"    tools:context="com.vily.html5.MainActivity">    <Button        android:id="@+id/button"        android:text="点击"        android:layout_width="match_parent"        android:layout_height="wrap_content"/>    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="match_parent">    </WebView></LinearLayout>

4，安卓代码：

package com.vily.html5;import android.content.Context;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebView;import android.widget.Button;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private Button mButton;    private WebView mWebview;    private VilyInterface mVilyInterface;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mButton = (Button) findViewById(R.id.button);        mButton.setOnClickListener(this);        mWebview = (WebView) findViewById(R.id.webview);        mWebview.loadUrl("file:///android_asset/index.html");        mWebview.getSettings().setJavaScriptEnabled(true);        mVilyInterface = new VilyInterface(this);        mWebview.addJavascriptInterface(mVilyInterface,"vily");    }    @Override    public void onClick(View v) {        mVilyInterface.showName("haha");    }    class VilyInterface {       private Context mContext;       public VilyInterface(Context context) {           this.mContext=context;       }       /***        *        * @param name  这个方法  供JavaScript去调用的        */       @JavascriptInterface       public void sayHello(String name){           Toast.makeText(mContext,"name="+name,Toast.LENGTH_LONG).show();       }       /**        *        * @param name   这个方法 用来调用 HTML中的方法        */       public void showName(final String name){           runOnUiThread(new Runnable() {               @Override               public void run() {                   mWebview.loadUrl("javascript:showName('"+name+"')");               }           });       }   }}

5，HTML 代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML5 测试</title><style type="text/css">.input{width: 90%;height: 30px;}.button{width: 60%;height: 40px;background: #fff;color: #000}</style><script type="text/javascript">function sayhello(){var name = document.getElementById("txtName").value;window.vily.sayHello(name);}function showName(name){document.getElementById("txtName").value=name;}</script></head><body><input id="txtName" class="input" ><br/><hr><button class="button" onclick="sayhello()">say Hello</button></body></html>

6，HTML文件放在asstes 目录下

地址：http://blog.csdn.net/u011710991/article/details/52219648

阅读全文

0 0