关闭

Android 与JS交互 调用本地相册在Html页面显示图片

标签: androidhtmlwebview图片
9487人阅读 评论(9) 收藏 举报
分类:

Android 与JS交互浅谈

Android 与 JS 交互主要分为:

  • JS 调用Android中的方法
    • Android首先要用WebView加载Html页面
      -mWebView.getSettings().addJavascriptInterface(new DemoJavascriptInterface(), “network”);
      mWebView.loadUrl();就可实现加载Html页面,与JS建立连接。
      在JS中的代码
<body> 
<p>测试 JS调本地相册</p>
<a class = "rect" onclick="sendInfoToAndroid()">JS调用相册</a> 
<p><img id= "img" src="file:///android_asset/a.jpg"  width="100" height="100"/></p>
<script>

function sendInfoToAndroid(){
//调用Android的方法启动相册
window.network.openPhoto();
}

    </script>
</body> 
}

咱先看看上边的代码:当html中矩形被点击后它会调用sendInfoToAndroid()方法,在sendInfoToAndroid()方法中通过window.network.openPhoto();来调用Android中openPhoto()方法,这里的network对应着前边的mWebView.getSettings().addJavascriptInterface(new DemoJavascriptInterface(), “network”);中的network,它们必须保持一致;
然后就是看openPhoto()方法是怎么写了

class DemoJavascriptInterface {

        public DemoJavascriptInterface() {
            // TODO Auto-generated constructor stub

        }

        @JavascriptInterface
        public void openPhtoto() {

            // 启动本地相册
            Intent intent = new Intent(Intent.ACTION_PICK);
            intent.setType("image/*");
            startActivityForResult(intent, PHOTO);

        }

    }

这样就可以实现JS调用Android 中的方法,html打开本地的相册;
- Android 调用JS中的方法
android调用的Js更简单,
mWebView.loadUrl(“javascript:setImag(‘”+path+”’)”);这样就实现了调用JS中的setImag(path)方法,并把图片的路径传给JS,并在Html中显示图片

//android 调用JS并设置图片
function setImag(path){
document.getElementById("img").src=""+path
  }

希望和喜爱编程的同学们,共同学习,共同进步。。。

1
6

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:19800次
    • 积分:342
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:3篇
    • 译文:1篇
    • 评论:9条
    文章分类
    最新评论