Android Naive与WebView的互相调用详解
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; }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!