这里有新鲜出炉的精品教程,程序狗速度看过来!
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
这篇文章主要介绍了 Android Naive 与 webView 的互相调用详解的相关资料, 需要的朋友可以参考下
Android Naive 与 WebView 的互相调用详解
Android 的 Naive 程序是可以嵌套 WebView,并且可以做到与 WebView 的交互,一般来说有两种方法,一是直接交互,比如,Naive 直接调用 WebView 的方法和 WebView 直接调用 Naive 的方法。二是 WebView 可以写超链接标签,然后用户点击此标签时,Naive 可以拦截到点击标签的事件,这样,我们可以在链接上做一套自己的协议,然后 Android 和 iOS 可以根据此协议做出相同的处理,做到多平台统一。
我们先研究一下 Naive 和 WebView 如何相互调用。
初始化:
- mWebView = (WebView) findViewById(R.id.main_wv);
- mWebView.getSettings().setJavaScriptEnabled(true);
- mWebView.loadUrl("file:///android_asset/demo.html");
- //第一个为交给WebView来进行控制的对象,第二个为控制的对象的变量名,即JS得到此对象后,在为此对象赋名,就可以进行控制了。
- mWebView.addJavascriptInterface(this, "naive");
1、Naive 直接调用 JS 方法:
下面为 html 中的 JS 方法 :
- function alert() {
- document.getElementById("title").innerHTML = "Naive调用Js无参方法";
- }
naive 进行调用,方式为调用 WebView 的 loadUrl 方法,方法中传递一个 String,格式为'javascript:'+'方法名'+'(变量)'
- public void onJs(View view) {
- mWebView.loadUrl("javascript:alert()");
- }
有参数 JS 方法:
- function alertWith(arg) {
- document.getElementById("title").innerHTML = arg;
- }
naive 进行有参 JS 调用:
- public void onJsWith(View view) {
- mWebView.loadUrl("javascript:alertWith('Naive调用Js有参方法')");
- }
2、JS 调用 naive:
本地先写好要被调用的方法,注意前面需要加上注解 @JavascriptInterface
- @JavascriptInterface
- public void toast() {
- Toast.makeText(this, "JS调用了Naive的无参方法", Toast.LENGTH_SHORT).show();
- }
JS 调用的代码:
- <input type="button" value="点击调用naive代码" onclick="window.naive.toast()"/>
本地写好有参的要被调用的方法:
- @JavascriptInterface
- public void toastWith(String toast) {
- Toast.makeText(this, toast, Toast.LENGTH_SHORT).show();
- }
js 调用有参的代码:
- <input type="button" value="点击调用naive代码并传递参数" onclick="window.naive.toastWith('JS调用了Naive的有参代码')"
- />
下面将 Activity 的源代码贴出来;
- public class MainActivity extends AppCompatActivity {
- private WebView mWebView;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- mWebView = (WebView) findViewById(R.id.main_wv);
- mWebView.getSettings().setJavaScriptEnabled(true);
- mWebView.addJavascriptInterface(this, "naive");
- mWebView.loadUrl("file:///android_asset/demo.html");
- }
- public void onJs(View view) {
- mWebView.loadUrl("javascript:alert()");
- }
- public void onJsWith(View view) {
- mWebView.loadUrl("javascript:alertWith('Naive调用Js有参方法')");
- }
- @JavascriptInterface
- public void toast() {
- Toast.makeText(this, "JS调用了Naive的无参方法", Toast.LENGTH_SHORT).show();
- }
- @JavascriptInterface
- public void toastWith(String toast) {
- Toast.makeText(this, toast, Toast.LENGTH_SHORT).show();
- }
- }
下面为 HTML 的代码:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
- <script type="text/javascript">
- function alert(){
- document.getElementById("title").innerHTML = "Naive调用Js无参方法";
- }
- function alertWith(arg){
- document.getElementById("title").innerHTML = arg;
- }
- </script>
- </head>
- <body>
- <h1 id="title"></h1><br/>
- <input type="button" value="点击调用naive代码" onclick="window.naive.toast()"/><br/>
- <input type="button" value="点击调用naive代码并传递参数"
- onclick="window.naive.toastWith('JS调用了Naive的有参代码')"/>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0821/337698.html