webView---------js 与 WebView 交互

简介: 引用:http://www.iteye.com/topic/456846 Html代码                     /* This function is invoked by the activity */           function wave() ...

引用:http://www.iteye.com/topic/456846

Html代码 
  收藏代码
  1. <html>  
  2.     <script language="javascript">  
  3.         /* This function is invoked by the activity */  
  4.         function wave() {  
  5.             alert("1");  
  6.             document.getElementById("droid").src="android_waving.png";  
  7.             alert("2");  
  8.         }  
  9.     </script>  
  10.     <body>  
  11.         <!-- Calls into the javascript interface for the activity -->  
  12.         <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;  
  13.             margin:0px auto;  
  14.             padding:10px;  
  15.             text-align:center;  
  16.             border:2px solid #202020;" >  
  17.                 <img id="droid" src="android_normal.png"/><br>  
  18.                 Click me!  
  19.         </div></a>  
  20.     </body>  
  21. </html>  



再看我们的java 代码。 

Java代码 
  收藏代码
  1. public class WebViewDemo extends Activity {  
  2.   
  3.     private static final String LOG_TAG = "WebViewDemo";  
  4.   
  5.     private WebView mWebView;  
  6.   
  7.     private Handler mHandler = new Handler();  
  8.   
  9.     @Override  
  10.     public void onCreate(Bundle icicle) {  
  11.         super.onCreate(icicle);  
  12.         setContentView(R.layout.main);  
  13.         mWebView = (WebView) findViewById(R.id.webview);  
  14.   
  15.         WebSettings webSettings = mWebView.getSettings();  
  16.         webSettings.setSavePassword(false);  
  17.         webSettings.setSaveFormData(false);  
  18.         webSettings.setJavaScriptEnabled(true);  
  19.         webSettings.setSupportZoom(false);  
  20.   
  21.         mWebView.setWebChromeClient(new MyWebChromeClient());  
  22.   
  23.         mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");  
  24.   
  25.         mWebView.loadUrl("file:///android_asset/demo.html");  
  26.     }  
  27.   
  28.     final class DemoJavaScriptInterface {  
  29.   
  30.         DemoJavaScriptInterface() {  
  31.         }  
  32.   
  33.         /** 
  34.          * This is not called on the UI thread. Post a runnable to invoke 
  35.          * loadUrl on the UI thread. 
  36.          */  
  37.         public void clickOnAndroid() {  
  38.             mHandler.post(new Runnable() {  
  39.                 public void run() {  
  40.                     mWebView.loadUrl("javascript:wave()");  
  41.                 }  
  42.             });  
  43.   
  44.         }  
  45.     }  
  46.   
  47.     /** 
  48.      * Provides a hook for calling "alert" from javascript. Useful for 
  49.      * debugging your javascript. 
  50.      */  
  51.     final class MyWebChromeClient extends WebChromeClient {  
  52.         @Override  
  53.         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {  
  54.             Log.d(LOG_TAG, message);  
  55.             result.confirm();  
  56.             return true;  
  57.         }  
  58.           
  59.     }  
相关文章
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
548 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
6月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
72 5
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
74 4
|
4月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
55 1
【JavaScript】网页交互的灵魂舞者
|
3月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
97 4
|
5月前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
47 2
|
6月前
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`&lt;transition&gt;`和`&lt;transition-group&gt;`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
92 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
|
6月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
56 0
|
6月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
54 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57