未加星标

Android与Javascript交互

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

转载请说明出处!

作者: kqw攻城狮

出处:个人站 | CSDN

本篇参考 Android与HTML+JS交互入门

效果图
Android与Javascript交互
加载本地Html contentWebView = (WebView) findViewById(R.id.webview); // 加载Assets下的Html contentWebView.loadUrl("file:///android_asset/html/test.html"); 启用javascript contentWebView.getSettings().setJavaScriptEnabled(true); contentWebView.addJavascriptInterface(this, "android"); Android调用Javascript的方法

Javascript写法

<scripttype="text/javascript"> function jsFunction(){ document.getElementById("content").innerHTML = "JS方法被调用"; } function jsFunctionArg(arg){ document.getElementById("content").innerHTML = "JS方法被调用并收到参数:<br/>" + arg; } </script>

Android写法

// 调用JS的jsFunction方法 contentWebView.loadUrl("javascript:jsFunction()"); // 调用JS的jsFunctionArg方法 contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')"); Javascript调用Android的方法

Android方法

@JavascriptInterface publicvoidandroidFunction(){ Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show(); } @JavascriptInterface publicvoidandroidFunction(String text){ Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \n" + text, Snackbar.LENGTH_SHORT).show(); }

Javascript调用

<inputtype="button"style="width:300px;height:50px;"value="JS调用Android方法"onclick="window.android.androidFunction()"/> <inputtype="button"style="width:300px;height:50px;"value="JS调用Android带有参数的方法"onclick="window.android.androidFunction('[JS传递过来的数据]')"/> Code HTML
Android与Javascript交互
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <scripttype="text/javascript"> function jsFunction(){ document.getElementById("content").innerHTML = "JS方法被调用"; } function jsFunctionArg(arg){ document.getElementById("content").innerHTML = "JS方法被调用并收到参数:<br/>" + arg; } </script> </head> <body> <h1>HTML页面</h1> <hr/> <h3><divid="content">|</div></h3> <hr/> <inputtype="button"style="width:300px;height:50px;"value="JS调用Android方法"onclick="window.android.androidFunction()"/> <br/> <inputtype="button"style="width:300px;height:50px;"value="JS调用Android带有参数的方法"onclick="window.android.androidFunction('[JS传递过来的数据]')"/> </body> </html> 测试类 package com.kongqw.kqwandroidjsdemo; import android.annotation.SuppressLint; import android.os.Bundle; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.webkit.JavascriptInterface; import android.webkit.WebView; public classMainActivityextendsAppCompatActivity{ private WebView contentWebView; @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled", "AddJavascriptInterface"}) @Override protectedvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); contentWebView = (WebView) findViewById(R.id.webview); // 加载Assets下的Html contentWebView.loadUrl("file:///android_asset/html/test.html"); // 启用Javascript contentWebView.getSettings().setJavaScriptEnabled(true); contentWebView.addJavascriptInterface(this, "android"); } @JavascriptInterface publicvoidandroidFunction(){ Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show(); } @JavascriptInterface publicvoidandroidFunction(String text){ Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \n" + text, Snackbar.LENGTH_SHORT).show(); } @Override publicbooleanonCreateOptionsMenu(Menu menu){ getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override publicbooleanonOptionsItemSelected(MenuItem item){ int id = item.getItemId(); if (id == R.id.action_js_function1) { // 调用JS的jsFunction方法 contentWebView.loadUrl("javascript:jsFunction()"); return true; } else if (id == R.id.action_js_function2) { // 调用JS的jsFunctionArg方法 contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')"); return true; } return super.onOptionsItemSelected(item); } }

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaAndroidHTMLJavaScriptSDN数据
分页:12
转载请注明
本文标题:Android与Javascript交互
本站链接:http://www.codesec.net/view/519895.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)