安卓webview和js+html交互利用的addJavascriptInterface和webview.loadUrl("javascript:**");

最新推荐文章于 2024-05-08 23:30:57 发布
最新推荐文章于 2024-05-08 23:30:57 发布
阅读量298 收藏
点赞数
分类专栏： android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qian00215145/article/details/84709769
版权

近期做一个项目需要把一个 服务支持的界面用webview来显示..呀 html白雪了js更是一样啥也不会，相信很多初学屌丝员跟我一样,,

html开发工具都不知道怎么写..哈哈哈.....现在把做完的结果分享一下先上图了

,,

这是从项目中特意分离出来的demo这里之上一些关键代码

源码下载地址  http://download.youkuaiyun.com/download/yung7086/7554309

 

步骤 首先在assets目录下建一个html文件

[html]   view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>  
  3.   <head>   
  4.         <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />   
  5.         
  6.      
  7. <script type="text/javascript">  
  8. function createTable(phon){   
  9.    var table = document.getElementById("table");   
  10.    var arrya=phon.split(";");  
  11.    var rowindex=0;  
  12.   for(var i=0;i<arrya.length;i++){  
  13.          var  child= arrya[i].split(",");  
  14.          var row = table.insertRow(rowindex);//创建一行   
  15.          rowindex+=1;  
  16.          var cell1 = row.insertCell();//创建一个单元   
  17.          cell1.innerHTML=child[0];  
  18.           var cell2 = row.insertCell();//创建一个单元   
  19.          cell2.innerHTML="("+i+")";  
  20.           
  21.         for(var n=1;n<child.length;n++){  
  22.              var row = table.insertRow(rowindex);//创建一行   
  23.              rowindex+=1;  
  24.              var cell1 = row.insertCell();//创建一个单元   
  25.            if(i==0){  
  26.               cell1.innerHTML= "<a href='javascript:Android.callPhone(\""+child[n]+"\")'>" +child[n];   
  27.            }else if(i==1){  
  28.              cell1.innerHTML= "<img src=\"file:///android_asset/qqicon.png\" height=\"14\" width=\"16\" > "+ "<a href='javascript:Android.callQQ(\""+child[n]+"\")'>" +child[n];   
  29.            }else if(i==2){  
  30.              cell1.innerHTML= "<img src=\"file:///android_asset/wxicon.png\" height=\"12\" width=\"16\" > "+ "<a href='javascript:Android.callWeixin(\""+child[n]+"\")'>" +child[n];   
  31.            }  
  32.            var cell2 = row.insertCell();  
  33.          }  
  34.      }  
  35.  }   
  36. </script>  
  37.  </head>   
  38.  <body>  
  39.   
  40.  <font color="#0099FF" size="5"> 服务支持</font> </p>  
  41.   
  42.   
  43. <table id="table" >  
  44. </table>  
  45. </p></p></p></p></p>  
  46.   
  47.  <font color="#233fF1" size="2">  
  48.  PS:</p>  
  49. 以上连接可以点击进入QQ或者微信程序，界面的电话号码QQ号码都是从服务器获取，获取的数据直接保存在应用的私有目录下，然后从该目录取出数据通过java类调用js填充到html上，html根据绑定的java对象调用java类的方法实现拨打电话，， 转载请标明出处  
  50. </p> 尊重作者 @author yung7086   
  51. </p> 2014年6月26日 11:25:46</font>  
  52.  </body>  
  53. </html>  


 

玩这个都玩了好久应为直接是eclipse开发 写一个function写了N遍老师少了逗号大括号还不报错。。。。郁闷的求推荐html+js的开发工具

 

算了还是整片的贴出来吧..html需要调用拨打电话这些功能就需要调用java类了这里我就需要定义一个java类实现html需要调用的方法

 

[java]   view plain copy print ?
  1. package com.example.jsdemo;  
  2.   
  3. import android.content.ComponentName;  
  4. import android.content.Context;  
  5. import android.content.Intent;  
  6. import android.content.pm.ApplicationInfo;  
  7. import android.content.pm.PackageManager;  
  8. import android.content.pm.PackageManager.NameNotFoundException;  
  9. import android.net.Uri;  
  10. import android.webkit.JavascriptInterface;  
  11.   
  12. /** 
  13.  * JS的调用的方法 
  14.  *  
  15.  * @author yung 
  16.  *         <p> 
  17.  *         2014年6月24日 09:26:14 
  18.  *         <p> 
  19.  *         此类中的打开的QQ 和微信是直接通过包名和类名调用虽然QQ微信包名不容易变 但是主界面好事可能会变 
  20.  *         如果发现打不开QQ微信应用可以查看是否是QQ微信升级更改了类名 
  21.  */  
  22. public class AndroidJavaScript {  
  23.   
  24.     Context c;  
  25.     String[] qqpackage = new String[] { "com.tencent.mobileqq",  
  26.             "com.tencent.mobileqq.activity.SplashActivity" };  
  27.     String[] wxpackage = new String[] { "com.tencent.mm",  
  28.             "com.tencent.mm.ui.LauncherUI" };  
  29.   
  30.     public AndroidJavaScript(Context c) {  
  31.         this.c = c;  
  32.     }  
  33.   
  34.     @JavascriptInterface  
  35.     public void callPhone(final String telphone) {  
  36.   
  37.         Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"  
  38.                 + telphone));  
  39.         c.startActivity(intent);  
  40.   
  41.     }  
  42.   
  43.     @JavascriptInterface  
  44.     public void callQQ(String qq) {  
  45.         // 实现调用电话号码  
  46.   
  47.         if (!checkBrowser(qqpackage[0])) {  
  48.   
  49.         } else {  
  50.             Intent intent = new Intent();  
  51.             ComponentName cmp = new ComponentName(qqpackage[0], qqpackage[1]);  
  52.             intent.setAction(Intent.ACTION_MAIN);  
  53.             intent.addCategory(Intent.CATEGORY_LAUNCHER);  
  54.             intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
  55.             intent.setComponent(cmp);  
  56.             c.startActivity(intent);  
  57.         }  
  58.   
  59.     }  
  60.   
  61.     @JavascriptInterface  
  62.     public void callWeixin(String weixin) {  
  63.   
  64.         if (!checkBrowser(wxpackage[0])) {  
  65.   
  66.         } else {  
  67.             Intent intent = new Intent();  
  68.             ComponentName cmp = new ComponentName(wxpackage[0], wxpackage[1]);  
  69.             intent.setAction(Intent.ACTION_MAIN);  
  70.             intent.addCategory(Intent.CATEGORY_LAUNCHER);  
  71.             intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
  72.             intent.setComponent(cmp);  
  73.             c.startActivity(intent);  
  74.   
  75.         }  
  76.   
  77.     }  
  78.   
  79.     // 获取在webview上获取js生成的html的源码  
  80.     @JavascriptInterface  
  81.     public void getSource(String htmlstr) {  
  82.         // Log.e("html", htmlstr);  
  83.         // String path = c.getFilesDir().getAbsolutePath() + "/serve.html"; //  
  84.         // data/data目录  
  85.   
  86.     }  
  87.         //检测包名的应用是否已经安装在手机  
  88.     public boolean checkBrowser(String packageName) {  
  89.         if (packageName == null || "".equals(packageName))  
  90.             return false;  
  91.         try {  
  92.             ApplicationInfo info = c.getPackageManager().getApplicationInfo(  
  93.                     packageName, PackageManager.GET_UNINSTALLED_PACKAGES);  
  94.             return true;  
  95.         } catch (NameNotFoundException e) {  
  96.             return false;  
  97.         }  
  98.     }  
  99. }  

现在有了方法有了html就差怎么调用了这样记得设置webview必要是参数

 

myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");

你是否发现html的js方法里面有酱紫的语句

<a href='javascript:Android.callWeixin(\""+child[n]+"\")'>"

确实这里面的”Android和“myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");必须相同哦..

这里注意双引号哈

 

[java]   view plain copy print ?
  1. WebSettings webSettings = myWebView.getSettings();  
  2.         webSettings.setJavaScriptEnabled(true);  
  3.         isExistsHTML();  
  4.         // myWebView.loadUrl("file:///android_asset/ss.html");  
  5.         String path = getFilesDir().getAbsolutePath() + HTMLNAME; // data/data目录  
  6.         myWebView.loadUrl("file:///" + path);  
  7.         myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");  
  8.   
  9.         // myWebView.loadUrl("javascript:getStr('" + 122222 + "')");  
  10.         myWebView.setWebViewClient(webviewcilnt);  


好把这里就解决了html里面调用java类实现的方法，，

 

下面说说 我这些QQ号和电话是从服务器获取的怎么添加到html上去。。这就是js的任务了

你看到我的html是没有什么布局，数据都是js生成出来的界面，。

怎么从java传到js里面呢  ？在java里面写myWebView.loadUrl("javascript:createTable('" + phon + "')");啦.

createTable（”“）；就是js的function名字.记住这个myWebView.loadUrl("javascript:createTable('" + phon + "')")

在onCreate加应该是不行的需要酱紫

 

[java]   view plain copy print ?
  1. myWebView.setWebViewClient(webviewcilnt);  
  2. ebViewClient webviewcilnt = new WebViewClient() {  
  3.     @Override  
  4.     public void onReceivedError(WebView view, int errorCode,  
  5.             String description, String failingUrl) {  
  6.   
  7.     }  
  8.   
  9.     @Override  
  10.     public void onPageFinished(WebView view, String url) {  
  11.         super.onPageFinished(view, url);  
  12.         String phon = loadHTMLData();  
  13.         myWebView.loadUrl("javascript:createTable('" + phon + "')");  
  14.         // 获取webview加载的html页面  
  15.         view.loadUrl("javascript:window.Android.getSource('<html>'+"  
  16.                 + "document.getElementsByTagName('html')[0].innerHTML+'</html>');");  
  17.   
  18.     }  
  19.   
  20.     @Override  
  21.     public void onPageStarted(WebView view, String url, Bitmap favicon) {  
  22.         super.onPageStarted(view, url, favicon);  
  23.     }  
  24. };  
Android WebView 的 addJavascriptInterface 探究
juruiyuan111的专栏
05-09 1348
Java和JS交互的方式有多种，这里探讨的方式是通过以下方式进行的交互。这篇文章是想弄明白 JavaScript 和 Java是如何实现这种方式互调的，就从源码角度开始分析。
Android中WebView与Js的交互
weixin_37841366的博客
09-25 4176
1. Android中通过WebView调用JS方法(传递参数) 2、Js调用Android的方法 3、 【实现效果】 1、App页面 app调用js中showDemo(str)方法存在两种方式: [1] 利用webview直接去执行js代码 2、demo.html 1、点击app中的按钮，调取js代码，并将返回结果显示在对应的控件中 2、web中点击按钮，去调用Andriod中的方法。 3、适配问题。 【2】js中调用app代码_广播+@J...
android webview javascriptinterface实现从HTML JS调用ANDROID内部程序
MAILLIBIN的专栏
12-28 659
1. 先在ANDROID程序内部建立一个公共类，公共类内建立@JavascriptInterface标注的公共程序，以备调用。 public class AndroidJavaScript{ @JavascriptInterface public string mypublicfunction(){ return "hello javascript! I'm Android." } }
关于Android4.2后WebView的js方法需要加@JavascriptInterface
asdf10245的博客
10-25 290
解读： targetSdkVersion>=17时，需要加上@JavascriptInterface，否则报错Uncaught TypeError: Object [object Object] ...。该标记为4.2之后引入，所以target=android-17或更高以便引入高版本android.jar 1、如果仅target低于17则出现矛盾：目标版本需要引入Ja...
在 Android WebView 中实现和 JavaScript 的互操作
sinat_17133389的博客
12-10 1475
有两个参数。其中 object 即需要提供给 js 调用的对象。在 Android 4.1.2 （API 16） 以下时，js 可以调用该对象的所有公开方法；在 Android 4.2 （API 17）以上时， js 只能调用添加了注解的公开方法。之所以会有这样的改动，是因为在 API 16 之前可以调用所有公开方法具有安全隐患，例如可以利用 jave 的反射机制实现任意命令的执行。interfaceName 即 js 调用时的接口名称。我们可以通过 webview 的。
Android 自定义WebView 原生接入及WebView JavascriptInterface
o190847959的专栏
01-17 3002
一WebView原生接入： Android webview继承自AbsoluteLayout，可以在其中放入一些子View，如下所示的布局文件：<TextView android:id="@+id/hello" android:layout_width="wrap_content" android:layout_height="wrap_conten
Android中WebView与HTML+Javascript的交互
10-18
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中加载和显示网页内容。而HTML和JavaScript则是构建网页的标准语言。将这三者结合，我们可以实现原生Android应用与Web内容的深度交互，创造出...
Android WebView与HTML+Javascript交互技术解析
在处理WebView与Javascript交互时，需要注意安全性问题。避免未经过滤的用户输入直接被WebView执行，防止注入攻击。此外，对于敏感操作，应该使用更安全的IPC机制而非Javascript接口。 知识点八：调试WebView应用 ...
android中WebView和javascript实现数据交互实例
10-25
然而，有时候我们需要让WebView中的JavaScript代码能够与Android代码进行交互，即让JavaScript调用Android代码的方法，以及让Android代码调用JavaScript定义的函数。以下是实现这种数据交互的一些知识点： 首先，在...
鸿蒙webview的使用和JS交互.zip
02-07
4. **JavaScript交互** 要实现Webview与JavaScript的交互，鸿蒙系统提供了`addJavascriptInterface`方法，允许将Java对象暴露给JavaScript。例如，我们创建一个Java对象并添加到Webview： ```java ...
Android：是时候掌握WebView与Js的交互技术了
2401_84166278的博客
04-11 858
为什么很多程序员做不了架构师？1、良好健康的职业规划很重要，但大多数人都忽略了2、学习的习惯很重要，持之以恒才是正解。3、编程思维没能提升一个台阶，局限在了编码，业务，没考虑过选型、扩展4、身边没有好的架构师引导、培养。所处的圈子对程序员的成长影响巨大。金九银十面试季，跳槽季，整理面试题已经成了我多年的习惯！在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。
展开说说：Android之WebView详解
最新发布
Hidanchaofan的博客
05-08 2243
onPageStarted是在onProgressChanged执行之后才会执行； onPageFinished是在onProgressChanged加载到100之后才执行； onReceivedError如果执行一定是在onPageFinished之后 还需要注意Android原生调用js需要在onPageFinished回调之后再调用否则不生效，因为B页面还没加载完你喊破嗓子它也不理你.
webView.addJavascriptInterface 用法
chuyouyinghe的专栏
12-11 2162
在这里我们引用Google的一个事例下面是我Google给提供的一个dome的地址：点击打开链接 我们先看它的HTML文件，HTML的文件路径是在：点击打开链接 他的代码为： /* This function is invoked by the activity */ /* 这个函数被Activity调用的活动
webview.loadUrl javascript 不执行的解决办法
KieSnow的博客
07-03 7711
webview.loadurl的加载是在另一个线程中执行必须要在webview加载完毕后执行 如 webview.loadUrl("file:///android_asset/test.html"); webview.loadUrl("javascript:function()")； 的方式会导致第二句的效果看不到。 原因：loadUrl是异步执行的，有可能第二句后发先至。 解决方法...
Android WebView的两点技巧-资源拦截与js注入
android开发笔记
07-24 2477
1.前言 WebView是个很常用的控件，但是缺不是那么简单，那么，今天来给大家介绍下最近在做的时候，遇见的几个问题。注意，并不是所有的情况下，webview加载的都是自适应的网页。比如说，加载&lt;p&gt;&lt;/p&gt;&lt;img&gt;&lt;/img&gt; 。 2.资源拦截问题 问题描述 网页的某些资源在手机上不合适，比如说css资源过于庞大，客户端加载太慢，比如说，...
android webview url显示'javascript',android - WebView's loadUrl("javascript:...") not working - Stack ...
weixin_33837516的博客
05-28 293
I am playing with Android's WebView: I have a sample text "asdf" which shall be dyed when the user clicks on a button (red, green or blue). To make things a little bit more complicated, the WebView fi...
Android webview调用js代码无效 webView.loadUrl("javascript:alert('hello')")
热门推荐
ggh990640782的专栏
03-24 1万+
利用WebView调用js的alert方法一直无效的解决办法 webView.loadUrl("javascript:alert('hello')") 利用 webview调用js需要注意一下四点 1） WebSettings设置支持javascript mWebView.getSettings().setJavaScriptEnabled(true);
android webview与H5页面交互 js调用原生代码回调原理
github_36165539的博客
08-29 5504
android webview与H5页面交互 js调用原生代码回调原理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值