关闭

JS交互示例

99人阅读 评论(0) 收藏 举报
分类:

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

效果图:


(一)Android部分:

布局代码:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:focusable="true"  
  6.     android:focusableInTouchMode="true"  
  7.     android:orientation="vertical"  
  8.     android:padding="8dp"  
  9.     tools:context=".MainActivity">  
  10.   
  11.     <LinearLayout  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content">  
  14.   
  15.         <EditText  
  16.             android:id="@+id/input_et"  
  17.             android:layout_width="0dp"  
  18.             android:layout_height="wrap_content"  
  19.             android:singleLine="true"  
  20.             android:layout_weight="1"  
  21.             android:hint="请输入信息" />  
  22.   
  23.         <Button  
  24.             android:text="Java调用JS"  
  25.             android:layout_width="wrap_content"  
  26.             android:layout_height="wrap_content"  
  27.             android:onClick="sendInfoToJs" />  
  28.     </LinearLayout>  
  29.   
  30.     <WebView  
  31.         android:id="@+id/webView"  
  32.         android:layout_width="match_parent"  
  33.         android:layout_height="match_parent" />  
  34.   
  35. </LinearLayout>  
Activity代码:
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  * Android WebView 与 Javascript 交互。 
  3.  */  
  4. public class MainActivity extends ActionBarActivity {  
  5.     private WebView webView;  
  6.   
  7.     @SuppressLint({"SetJavaScriptEnabled""AddJavascriptInterface"})  
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.   
  13.         webView = (WebView) findViewById(R.id.webView);  
  14.   
  15.         webView.setVerticalScrollbarOverlay(true);  
  16.         //设置WebView支持JavaScript  
  17.         webView.getSettings().setJavaScriptEnabled(true);  
  18.   
  19.         String url = "http://192.168.1.27/js_17_android_webview.html";  
  20.         webView.loadUrl(url);  
  21.   
  22.         //在js中调用本地java方法  
  23.         webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");  
  24.   
  25.         //添加客户端支持  
  26.         webView.setWebChromeClient(new WebChromeClient());  
  27.     }  
  28.   
  29.     private class JsInterface {  
  30.         private Context mContext;  
  31.   
  32.         public JsInterface(Context context) {  
  33.             this.mContext = context;  
  34.         }  
  35.   
  36.         //在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。  
  37.         @JavascriptInterface  
  38.         public void showInfoFromJs(String name) {  
  39.             Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();  
  40.         }  
  41.     }  
  42.   
  43.     //在java中调用js代码  
  44.     public void sendInfoToJs(View view) {  
  45.         String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();  
  46.         //调用js中的函数:showInfoFromJava(msg)  
  47.         webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");  
  48.     }  
  49. }  
(二)网页代码:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   
  4. <html>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <meta http-equiv="Content-Language" content="zh-cn" />  
  7.   
  8. <title>Android WebView 与 Javascript 交互</title>  
  9. <head>  
  10.   <style>  
  11.   body {background-color:#e6e6e6}  
  12.   
  13.   .rect  
  14.   {  
  15.     color:white;  
  16.     font-family:Verdana, Arial, Helvetica, sans-serif;  
  17.     font-size:16px;  
  18.     width:100px;  
  19.     padding:6px;  
  20.     background-color:#98bf21;  
  21.     text-decoration:none;  
  22.     text-align:center;  
  23.     border:none;  
  24.     cursor:pointer;  
  25.   }  
  26.   
  27.   .inputStyle {font-size:16px;padding:6px}  
  28.   </style>  
  29. </head>  
  30.   
  31. <body>  
  32.   <p>测试Android WebView 与 Javascript 交互</p>  
  33.   <input id = "name_input" class = "inputStyle" type="text"/>  
  34.   <a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>  
  35.   
  36.   <script>  
  37.   function sendInfoToJava(){  
  38.     //调用android程序中的方法,并传递参数  
  39.     var name = document.getElementById("name_input").value;  
  40.     window.AndroidWebView.showInfoFromJs(name);  
  41.   }  
  42.   
  43.   //在android代码中调用此方法  
  44.   function showInfoFromJava(msg){  
  45.     alert("来自客户端的信息:"+msg);  
  46.   }  
  47.   </script>  
  48.   
  49. </body>  
  50. </html>  

0
0
查看评论

jsp与js交互实例

使用jsp(就是java代码)拼js脚本:   lefthead.jsp   <% String basepath = request.getContextPath()+"/"; String jsStr=""...
  • lushuaiyin
  • lushuaiyin
  • 2012-06-11 11:53
  • 2598

Android:你要的WebView与 JS 交互方式 都在这里了

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现 今天我将全面介绍Android通过WebView与JS交互的全面方式 阅读本...
  • carson_ho
  • carson_ho
  • 2017-03-22 09:19
  • 89159

android与js交互-jsbridge

对js与android交互进行的封装,可自定义协议,没有js注入漏洞,安全可靠,兼容android所有系统版本
  • y_chengyong
  • y_chengyong
  • 2016-10-09 16:27
  • 1131

WebView---Android与js交互实例

Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML)交互有四种情况: 1) Android(Java)调用HTML中js代码 2) An...
  • IT1039871366
  • IT1039871366
  • 2015-06-05 09:37
  • 45342

WKWebView与JS交互之实战技巧介绍

前言上一篇专门讲解了WKWebView相关的所有类、代理的所有API。前篇文章地址:http://blog.csdn.net/baihuaxiu123/article/details/51286109 那么本篇讲些什么呢?当然是实战了!先看看效果图.效果图通过本篇文章,至少可以学习到: OC如何给...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-04-30 18:34
  • 6262

html和js交互

package com.bawei.webviewdemo; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.co...
  • guo15137668937
  • guo15137668937
  • 2016-07-11 19:43
  • 795

Swift与JS交互

swift与js交互: 先看model: @objc protocol VideoDelegate : JSExport { func callSystemCamera(); func exitsCollection(cid: String); } @objc class OC...
  • yaojinhai06
  • yaojinhai06
  • 2017-11-09 16:57
  • 205

iOS与网页JS交互,看我就够了

随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互、相互传值。比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器。 ...
  • LeaderQiu
  • LeaderQiu
  • 2016-07-19 15:07
  • 34583

Android与HTML+JS交互入门

在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的javascript进行交互,Android也对交互做了很好的封装,所以很容易实现例如:点击网页中的按钮Andr...
  • leejizhou
  • leejizhou
  • 2016-03-15 13:01
  • 38116

简单的实现 Js和java交互

效果:点击img标签实现图片的交替显示,实现需要懂点js,哈哈。 //上代码 public class MainActivity extends AppCompatActivity { WebView mWebView; android.os.Handler mHandler;...
  • u011057161
  • u011057161
  • 2016-10-17 18:23
  • 5212
    个人资料
    • 访问:27374次
    • 积分:769
    • 等级:
    • 排名:千里之外
    • 原创:43篇
    • 转载:34篇
    • 译文:1篇
    • 评论:10条
    文章分类
    最新评论