android和H5之间的交互 最近用到这个比较多 很多知识都忘了 来巩固一下
2017-07-11 10:03
288 查看
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:
2、Android本地通过Java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
若调用的js方法没有返回值,则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法;若有返回值时我们可以调用mWebView.evaluateJavascript()方法:
js代码如下:
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明,下面是在一个本地Java方法
定义完这个方法后再调用mWebView.addJavascriptInterface()方法:
那么在js中怎么来调用呢?
4、拦截HTML页面中的点击事件
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码:
mainActivity
test.html
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
//例如:加载assets文件夹下的test.html页面 mWebView.loadUrl("file:///android_asset/test.html") //例如:加载网页 mWebView.loadUrl("http://www.baidu.com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:
mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { mWebView.loadUrl(url); return true; } } });
2、Android本地通过Java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
WebSettings webSettings = mWebView.getSettings(); //设置为可调用js方法 webSettings.setJavaScriptEnabled(true);
若调用的js方法没有返回值,则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法;若有返回值时我们可以调用mWebView.evaluateJavascript()方法:
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.e(TAG, "onReceiveValue value=" + value); } });
js代码如下:
<script type="text/javascript"> function sum(a,b){ return a+b; } function do(){ document.getElementById("p").innerHTML="hello world"; } </script>
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明,下面是在一个本地Java方法
public class JsInteration { @JavascriptInterface public String back() { return "hello world"; } }
定义完这个方法后再调用mWebView.addJavascriptInterface()方法:
mWebView.addJavascriptInterface(new JsInteration(), "android");
那么在js中怎么来调用呢?
<script type="text/javascript"> function s(){ //调用Java的back()方法 var result =window.android.back(); document.getElementById("p").innerHTML=result; } </script>
4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { //判断url拦截事件 if (url.equals("file:///android_asset/test2.html")) { Log.e(TAG, "shouldOverrideUrlLoading: " + url); startActivity(new Intent(MainActivity.this,Main2Activity.class)); return true; } else { mWebView.loadUrl(url); return false; } } });
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码:
mainActivity
public class MainActivity extends AppCompatActivity { public static final String TAG = "MainActivity"; private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webView); mWebView.loadUrl("file:///android_asset/test.html"); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); mWebView.addJavascriptInterface(new JsInteration(), "android"); mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url.equals("file:///android_asset/test2.html")) { Log.e(TAG, "shouldOverrideUrlLoading: " + url); startActivity(new Intent(MainActivity.this,Main2Activity.class)); return true; } else { mWebView.loadUrl(url); return false; } } }); } //Android调用有返回值js方法 @TargetApi(Build.VERSION_CODES.KITKAT) public void onClick(View v) { mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.e(TAG, "onReceiveValue value=" + value); } }); } public class JsInteration { @JavascriptInterface public String back() { return "hello world"; } } }
test.html
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function sum(a,b){ return a+b; } function s(){ var result =window.android.back(); document.getElementById("p").innerHTML=result; } </script> </head> <body> <button onclick="s()">调用本地方法</button> <a href="file:///android_asset/test2.html">点击</a> <p id="p"></p> </body> </html>
相关文章推荐
- 好久没写博客了,最近准备从新认识一下自己,审视一下自己,从新梳理一下android知识!
- H5与Android之间的交互
- HTML框架(HTML Frames),很多网站都用到这个知识
- 最近翻译了一下国外的w3schools,巩固一下基础知识,希望对大家有所帮助
- Android和H5之间的交互
- Android 6.0 AMS分析的第二条线:以Launcher启动一个Activity为例,分析应用进程的创建、Activity的启动,以及他们和AMS之间的交互等知识;
- 最近打算更仔细学习一下linux操作系统。先是恶补了一下用户、用户组、文件权限这三样比较重要的知识。
- 最近总结了很多C#以及Unity的基础知识,分享一下
- Android和H5之间的交互
- Android和H5之间的交互
- 今天和大家讲一下怎么实现秒表这个功能Chronometer。很多地方都要用到秒表这个功能,比如视频录制,游戏(1)
- Android和H5之间的交互
- 最近遇到的比较重要的,面试可能会用到的知识
- 据说程序员是最爱学习的群体,IT男都知道,这个行业日新月异,必须不断地学习新知识,不断地为自己注入新鲜的血液,才能使自己跟上技术的步伐。 今天我们来讲一下Android中BroadcastReceiv
- android 自动划屏效果 在这里,我们需要用到google提到的一个包——android-support-v4.jar,这个包是为了方便实现android view之间的切换,关
- 在android开发中,经常用到去解析xml文件,常见的解析xml的方式有一下三种:SAX、Pull、Dom解析方式。最近做了一个android版的CSDN阅读器,用到了其中的两种(sax,pull)
- 比较一下 JSF 和 Struts 之间各自的优缺点
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- 自己最近用到的log4net写入oracle的配置,总结一下吧