android 原生与web交互，java与js的互相调用

最新推荐文章于 2021-02-13 00:29:05 发布

那谁家的二胖

最新推荐文章于 2021-02-13 00:29:05 发布

阅读量496

点赞数

分类专栏： Android Web 文章标签： android web

本文链接：https://blog.csdn.net/qq_35011946/article/details/53610903

版权

Web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Android

1 篇文章 0 订阅

订阅专栏

先来一张效果图

布局文件

不多说，直接贴代码，

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/web"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"/>
<EditText
android:id="@+id/edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="请输入内容"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="将原生的信息传入网页"
android:onClick="set"/>

</LinearLayout>

html代码：

<html>
<body>
<center>
<p>
<input id="text" type="text" value="please input" οnfοcus="javascript:if(this.value=='please input')this.value='';">
<p>
<button οnclick="toast()">show toast</button>
</center>
</body>
<script type="text/javascript">

//去原生的界面弹一个吐司
function toast(){
var str = document.getElementById("text").value;

//window就是原生界面中的webView，native就是被注入的对象，要与原生界面命名一致
window.native.showToast(str);
}

//接收原生界面传过来的数据，并设置到输入框
function setContent(msg){
var te = document.getElementById("text");
te.value = msg;
}

</script>
</html>

java代码：

public class WebActivity extends Activity {
WebView webView;
EditText editText;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.web_layout);
webView = (WebView) findViewById(R.id.web);
editText = (EditText) findViewById(R.id.edit);

//加载本地的html文档，不需要网络权限，将html文件放在项目的assets文件夹中即可
webView.loadUrl("file:///android_asset/index.html");
//设置允许执行javaScript函数
webView.getSettings().setJavaScriptEnabled(true);
//向web页面注入native对象，第二个参数是对象名，要与web端保持一致
webView.addJavascriptInterface(new NaObject(), "native");
}

/**
* native对象中要有"showToast"方法
*/
class NaObject {
@JavascriptInterface
public void showToast(String str) {
Toast.makeText(WebActivity.this, str, Toast.LENGTH_SHORT).show();
}
}

/**
* 点击按钮时将调用web页面中的函数，并将数据传递过去
*/
public void set(View v){
String msg = editText.getText().toString();
String js = "javascript:setContent(\""+msg+"\")";
webView.loadUrl(js);
}

}

不过在java调用js方法效率不是很高，不建议大量使用。

那谁家的二胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
android 原生与web交互，java与js的互相调用

先来一张效果图布局文件不多说，直接贴代码， android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > android:id="@+id/web"
复制链接

扫一扫

专栏目录