脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android Naive与WebView

Android  Naive与WebView的互相调用详解

 更新时间：2017年05月08日 11:15:54   投稿：lqh  
这篇文章主要介绍了Android Naive与WebView的互相调用详解的相关资料,需要的朋友可以参考下

Android  Naive与WebView的互相调用详解

Android的Naive程序是可以嵌套WebView，并且可以做到与WebView的交互，一般来说有两种方法，一是直接交互，比如，Naive直接调用WebView的方法和WebView直接调用Naive的方法。二是WebView可以写<a/>超链接标签，然后用户点击此标签时，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>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

相关文章

  • Android编程实现的首页左右滑动切换功能示例

    Android编程实现的首页左右滑动切换功能示例

    这篇文章主要介绍了Android编程实现的首页左右滑动切换功能,涉及Android事件监听及响应相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • Android学习之Flux架构入门

    Android学习之Flux架构入门

    Flux是Facebook在14年提出的一种Web前端架构，主要用来处理复杂的UI逻辑的一致性问题（当时是为了解决Web页面的消息通知问题）。接下来从其特点和使用上来介绍Flux架构。本文主要目的是让你对Flux的一个架构大体面貌有个了解。
    2016-08-08
  • 浅谈Android Content Provider的使用

    浅谈Android Content Provider的使用

    本篇文章小编为大家介绍，Android Content Provider的使用。需要的朋友参考下
    2013-04-04
  • Android实现短视频画心效果

    Android实现短视频画心效果

    这篇文章主要为大家详细介绍了Android实现短视频画心效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Android Adapter适配器使用示例讲解

    Android Adapter适配器使用示例讲解

    这篇文章主要为大家介绍了Android Adapter适配器使用示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • Android Scroller完全解析

    Android Scroller完全解析

    这篇文章主要为大家详细介绍了Android Scroller源码，区分scrollTo()和scrollBy()，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 解决EditText不显示光标的三种方法(总结)

    解决EditText不显示光标的三种方法(总结)

    下面小编就为大家带来一篇解决EditText不显示光标的三种方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Android中google Zxing实现二维码与条形码扫描

    Android中google Zxing实现二维码与条形码扫描

    这篇文章主要介绍了Android中google Zxing实现二维码与条形码扫描的相关资料,需要的朋友可以参考下
    2017-05-05
  • android用java和c实现查找sd卡挂载路径(sd卡路径)的方法

    android用java和c实现查找sd卡挂载路径(sd卡路径)的方法

    这篇文章主要介绍了android用java和c实现查找sd卡挂载路径(sd卡路径)的方法,需要的朋友可以参考下
    2014-02-02
  • Android自定义view绘制圆环占比动画

    Android自定义view绘制圆环占比动画

    这篇文章主要为大家详细介绍了Android自定义view绘制圆环占比动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论