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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
