好资源导航 » 文章资讯 » Android Naive与WebView的互相调用详解

Android Naive与WebView的互相调用详解

2024-02-24 05:21:03 39

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方法：

functionalert(){
document.getElementById("title").innerHTML="Naive调用Js无参方法";
}

naive进行调用，方式为调用WebView的loadUrl方法，方法中传递一个String，格式为'javascript:'+'方法名'+'(变量)'

publicvoidonJs(Viewview){
mWebView.loadUrl("javascript:alert()");
}

有参数JS方法：

functionalertWith(arg){
document.getElementById("title").innerHTML=arg;
}

naive进行有参JS调用：

publicvoidonJsWith(Viewview){
mWebView.loadUrl("javascript:alertWith('Naive调用Js有参方法')");
}

2、JS调用naive:

本地先写好要被调用的方法，注意前面需要加上注解@JavascriptInterface

@JavascriptInterface
publicvoidtoast(){
Toast.makeText(this,"JS调用了Naive的无参方法",Toast.LENGTH_SHORT).show();
}

JS调用的代码:

本地写好有参的要被调用的方法:

@JavascriptInterface
publicvoidtoastWith(Stringtoast){
Toast.makeText(this,toast,Toast.LENGTH_SHORT).show();
}

js调用有参的代码:

下面将Activity的源代码贴出来；

publicclassMainActivityextendsAppCompatActivity{

privateWebViewmWebView;

@Override
protectedvoidonCreate(BundlesavedInstanceState){
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");

}


publicvoidonJs(Viewview){
mWebView.loadUrl("javascript:alert()");
}

publicvoidonJsWith(Viewview){
mWebView.loadUrl("javascript:alertWith('Naive调用Js有参方法')");
}


@JavascriptInterface
publicvoidtoast(){
Toast.makeText(this,"JS调用了Naive的无参方法",Toast.LENGTH_SHORT).show();
}

@JavascriptInterface
publicvoidtoastWith(Stringtoast){
Toast.makeText(this,toast,Toast.LENGTH_SHORT).show();
}

}

下面为HTML的代码:





functionalert(){
document.getElementById("title").innerHTML="Naive调用Js无参方法";
}
functionalertWith(arg){
document.getElementById("title").innerHTML=arg;
}

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

返回顶部
514930285
czq8825@qq.com

Android Naive与WebView的互相调用详解

热门推荐

随机推荐