温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Naive与WebView在Android中怎么实现互相调用

发布时间:2020-12-04 17:05:29 来源:亿速云 阅读:183 作者:Leah 栏目:移动开发

本篇文章为大家展示了Naive与WebView在Android中怎么实现互相调用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

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> 
<h2 id="title"></h2><br/> 
<input type="button" value="点击调用naive代码" onclick="window.naive.toast()"/><br/> 
<input type="button" value="点击调用naive代码并传递参数" 
    onclick="window.naive.toastWith('JS调用了Naive的有参代码')"/> 
</body> 
</html> 

上述内容就是Naive与WebView在Android中怎么实现互相调用,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI