在Android中如何的跟html交互

最新推荐文章于 2023-04-15 17:57:28 发布

KKLiuZ

最新推荐文章于 2023-04-15 17:57:28 发布

阅读量869

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/KKLiuZ/article/details/46510977

版权

Android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html很火耶，特别是HTML5。也有很多的人问html下如何跟Android进行交互。写了个小例子帮助下大家理解吧：

我们都知道在Android里面加载网页通过WebView来实现的，所以都是利用这个组件来完成的。

新建一个Android工程，在assets中新建一个www文件夹，里面建立一个名为default.html的网页，网页里内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Csu.Lz Demo </title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
<
</style>
   <script language="javascript" type="text/javascript">
      function test_android(){//此处js代码要访问Android里的方法
        var xx_value = document.getElementById("xx").value ;
        window.<span style="color:#ff0000;"><strong>android_js</strong></span>.executOnJavascript(xx_value);//访问Android里的executOnJavaScript方法}
	//Android中将要执行的脚本
	  function test2(obj){
	    var xx_ = document.getElementById("xx");
	    xx_.value="我是通过Android来设置的！" ;
	  }
	</script>
</head>

<body>
<div><input name="xx" id="xx"><input type="button" value="提交" οnclick="test_android();">
</body>
</html>

整个js中的内容已经做了注释，相信能理解。

接下来我们来看Android里如何的来写了：

以下是界面Layout的内容：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="html_load"
        android:text="Html修改安卓里的内容" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="send_to_html"
        android:text="更改网页内容-给网页传参" />

    </LinearLayout>

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

最后是Java的代码：

public class Html5MainActivity extends Activity {

	WebView  wv = null ; 
	Button btn = null ;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_html5_main);
        btn = (Button)findViewById(R.id.btn);
        
        
        wv = (WebView)findViewById(R.id.webView1) ;
        WebSettings ws = wv.getSettings() ;
        ws.setJavaScriptEnabled(true ) ; //允许访问js
        InJavaScript js = new InJavaScript(this);
        //访问js的接口，第二个参数理解是js里的window下创建的一个对象，所以在js里可以直接访问
        wv.addJavascriptInterface(js, "android_js");
        
    }

    public void html_load(View v){
    	//button  事件 加载html5 
    	wv.loadUrl("file:///android_asset/www/default.html");
    }
    public void send_to_html(View v){
    	//点击向网页js传参数，执行html中的js
    	wv.loadUrl("javascript:test2(100)");
    }
    //在子线程里加载网络：
    Handler hanlder = new Handler();
    
    //要想在JS中调用Android的方法，需要定义接口让js来访问
    public class InJavaScript{ 
    	Context c ;
    	public InJavaScript(Context c){
    		this.c = c ;
    	}
    	//该方法可以被js里调用 ,参数从网页传进来
    	public void executOnJavascript(final String url){
    		hanlder.post(new Runnable() {
				@Override
				public void run() {
					btn.setText("你看改变了吧 :" + url ) ;
					Toast.makeText(c, "这个也是可以的哟 ~~~~", 10).show();
				}
			});
    	}
    }
    
}

好了，可以看到在Android和js中都可以相互的访问了。至于html5 其他的作用相信大家可以从这个小例子里有点启发了。

KKLiuZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在Android中如何的跟html交互

html很火耶，特别是HTML5。也有很多的人问html下如何跟Android进行交互。写了个小例子帮助下大家理解吧：我们都知道在Android里面加载网页通过WebView来实现的，所以都是利用这个组件来完成的。新建一个Android工程，在assets中新建一个www文件夹，里面建立一个名为default.html的网页，网页里内容如下：Csu.Lz Demo <!-
复制链接

扫一扫

专栏目录