文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android应用中怎么利用WebView与Javascript进行交互

2023-05-31 09:56

关注

Android应用中怎么利用WebView与Javascript进行交互?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用。

(一)Android部分:

布局代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:focusable="true"  android:focusableInTouchMode="true"  android:orientation="vertical"  android:padding="8dp"  tools:context=".MainActivity">  <LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content">    <EditText      android:id="@+id/input_et"      android:layout_width="0dp"      android:layout_height="wrap_content"      android:singleLine="true"      android:layout_weight="1"      android:hint="请输入信息" />    <Button      android:text="Java调用JS"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:onClick="sendInfoToJs" />  </LinearLayout>  <WebView    android:id="@+id/webView"    android:layout_width="match_parent"    android:layout_height="match_parent" /></LinearLayout>

Activity代码:

public class MainActivity extends ActionBarActivity {  private WebView webView;  @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    webView = (WebView) findViewById(R.id.webView);    webView.setVerticalScrollbarOverlay(true);    //设置WebView支持JavaScript    webView.getSettings().setJavaScriptEnabled(true);    String url = "http://192.168.1.27/js_17_android_webview.html";    webView.loadUrl(url);    //在js中调用本地java方法    webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");    //添加客户端支持    webView.setWebChromeClient(new WebChromeClient());  }  private class JsInterface {    private Context mContext;    public JsInterface(Context context) {      this.mContext = context;    }    //在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。    @JavascriptInterface    public void showInfoFromJs(String name) {      Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();    }  }  //在java中调用js代码  public void sendInfoToJs(View view) {    String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();    //调用js中的函数:showInfoFromJava(msg)    webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");  }}

(二)网页代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>Android WebView 与 Javascript 交互</title><head> <style> body {background-color:#e6e6e6} .rect {  color:white;  font-family:Verdana, Arial, Helvetica, sans-serif;  font-size:16px;  width:100px;  padding:6px;  background-color:#98bf21;  text-decoration:none;  text-align:center;  border:none;  cursor:pointer; } .inputStyle {font-size:16px;padding:6px} </style></head><body> <p>测试Android WebView 与 Javascript 交互</p> <input id = "name_input" class = "inputStyle" type="text"/> <a class = "rect" onclick="sendInfoToJava()">JS调用Java</a> <script> function sendInfoToJava(){  //调用android程序中的方法,并传递参数  var name = document.getElementById("name_input").value;  window.AndroidWebView.showInfoFromJs(name); } //在android代码中调用此方法 function showInfoFromJava(msg){  alert("来自客户端的信息:"+msg); } </script></body></html>

看完上述内容,你们掌握Android应用中怎么利用WebView与Javascript进行交互的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯