android中webView和html中js的交互

最新推荐文章于 2023-10-26 07:30:00 发布

不能停止前进

最新推荐文章于 2023-10-26 07:30:00 发布

阅读量745

点赞数

分类专栏： Android 文章标签： js和webView交互 android和js交互 android和webView交互 android和html交互

本文链接：https://blog.csdn.net/u013136708/article/details/45504315

版权

Android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

现在hybrid app比较火，使用起来也比较方便。

android中通过webView加载显示url，通常会遇到一些问题，比如android和网页界面的交互。比如定位的功能，需要手机提供给js一个经纬度。下面有一个简单交互的例子

public class MainActivity extends Activity {
private WebView webview;

private String URL = "http://192.168.1.224:8080/app/aaa.html";// 这是你要访问你html文件的存放地址，我这个是放在appache中的word文件夹下的login.html文件
private Handler mHandler = new Handler();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webview = (WebView) findViewById(R.id.webView1);

WebSettings webset = webview.getSettings();

webset.setJavaScriptEnabled(true);// 启用JS脚本,这个一定要加上，不然就调用不了，无法交互，因为调用的方法写在js里面

//	 webset.setUseWideViewPort(true); // 上下自适应屏幕

webset.setLoadWithOverviewMode(true); // 自适应屏幕

webview.setWebChromeClient(new WebChromeClient() {

});

webview.addJavascriptInterface(new JsObject(), "jsObject");

webview.loadUrl(URL);

}


public class JsObject {

@JavascriptInterface
//@JavascriptInterface必须写上，不写上也实现不了交互
//这个方法不是在ui线程中的。可以通过handler.post发送到ui线程执行。可以用Thread.currentThread.getId查看线程的id
public void getMessage(String name, String pwd) {

// TODO Auto-generated method stub
mHandler.post(new Runnable() {
    public void run(){
        System.out.println("===" + "name:" + name + "---pwd:" + pwd);

        Toast.makeText(MainActivity.this, "user="+name+"==pw="+pwd, Toast.LENGTH_SHORT).show();
    }
});


}

}


}

html文件代码

<!DOCTYPE html>

　　<html>
　　　　<head>
　　　　　　<script>
　　　　　　　　function login(){
　　　　　　　　　　var th = document.form;
　　　　　　　　　　var user = th.user.value;
　　　　　　　　　　if(user==""){
　　　　　　　　　　　　alert("请输入用户名!");
　　　　　　　　　　}else{
　　　　　　　　　　　　var name = th.user.value;
　　　　　　　　　　　　var pwd = th.pwd.value;
　　　　　　　　　　　　var name2 = jsObject.getMessage(name,pwd);
　　　　　　　　　　}
　　　　　　　　}
　　　　　　</script>
　　　　</head>
　　　　<body>
　　　　　　<form name='form' method='post' class='form' action=''>
　　　　　　　　<table id='login_table'>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　<span>账号:</sapn>
　　　　　　　　　　　　</td>
　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　<input type='text' class='usr' name='user' value=''/>
　　　　　　　　　　　　</td>
　　　　　　　　　　　　<td></td>
　　　　　　　　　　</tr>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　<span>密码:</sapn>
　　　　　　　　　　　　</td>
　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　<input type='password' class='psw' name='pwd' value=''/>
　　　　　　　　　　　　</td>
　　　　　　　　　　　　<td></td>
　　　　　　　　　　</tr>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td></td>
　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　<input type="file" value="上传图片" />
　　　　　　　　　　　　　　<button class='denglu' οnclick="login()">登陆</button>
　　　　　　　　　　　　　　<button class='clear'>清空</button>
　　　　　　　　　　　　</td>
　　　　　　　　　　　　<td></td>
　　　　　　　　　　</tr>
　　　　　　　　</table>
　　　　　　</form>
　　　　</body>
　　</html>

可以把上面的html放在tomcat的webapps目录下，也可以直接放在android项目的assets文件夹中，这个时候读取的url就是webview.loadUrl(file:///android_asset/aaa.html);

点击登录的时候，会调用js的login方法，在login方法中先会判断用户名是不是为空，为空就弹出提示，不为空的话就获取输入的用户名和密码，然后再调用android的getmessage（），把用户名和参数的方法传递到android，在手机端就能弹出提示的toast，实现了webView和js的交互。这里是js调用了android中提供的方法

这里只是实现了js调用android的方法，如何实现android调用js的代码

在android需要调用js代码的地方加上一句webview.loadUrl("javascript:setLocation()");

其中的setLocation()方法就是js中的一个function

需要注意的地方：

被js调用的android方法，需要加一个 @JavascriptInterface标致，每个方法都必须加。

webView设置需要加上webset.setJavaScriptEnabled(true);启用js脚本

Android中被js调用的方法不是在ui线程中执行的，可以通过Thread.currentThread.getId()来查看是否在同一个线程中。一些操作需要通过handler.post发送出到ui线程中来才能处理。

通过上面的方法。可以知道，要想获得经纬度的话，先点击一个按钮，通过js调用android中的方法获取经纬度，然后android获取到经纬度之后必须再通知js，告诉他这个经纬度我已经拿到了。也就是在获得经纬度后再调用js中的function方法，在这个function方法中再次调用android中的另一个有返回值的方法来返回这个经纬度给js

不能停止前进

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android中webView和html中js的交互

现在hybrid app比较火，使用起来也比较方便。android中通过webView加载显示url，通常会遇到一些问题，比如android和网页界面的交互。比如定位的功能，需要手机提供给js一个经纬度。下面有一个简单交互的例子public class MainActivity extends Activity {private WebView webview;
复制链接

扫一扫