欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  移动技术

Android Naive与WebView的互相调用详解

程序员文章站 2023-12-01 16:13:10
android  naive与webview的互相调用详解 android的naive程序是可以嵌套webview，并且可以做到与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>

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

上一篇： SpringBoot部署在Weblogic步骤详情

下一篇： Android 属性动画ValueAnimator与插值器详解

推荐阅读