android中Webview与javascript的交互(互相调用)
来源:互联网 发布:美国知乎quora 中国 编辑:程序博客网 时间:2024/05/01 05:23
最近做Android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主要实现过程如下:通过加载本地的html文件(里面有js脚本),实现android本地方法和js中的交互。
第一步:
mainfest.xml中加入网络权限
- <uses-permission android:name=“android.permission.INTERNET” />
<uses-permission android:name="android.permission.INTERNET" />第二步:
加载本地写好的html文件(定义好js中提供给android调用的方法 funFromjs(),和android提供给js调用的对象接口fun1FromAndroid(String name)),放在 assets目录下。
- <body>
- <a>js中调用本地方法</a>
- <script>
- function funFromjs(){
- document.getElementById(“helloweb”).innerHTML=“HelloWebView,i’m from js”;
- }
- var aTag = document.getElementsByTagName(‘a’)[0];
- aTag.addEventListener(‘click’, function(){
- //调用android本地方法
- myObj.fun1FromAndroid(“调用android本地方法fun1FromAndroid(String name)!!”);
- return false;
- }, false);
- </script>
- <p></p>
- <div id=“helloweb”>
- </div>
- </body>
<body> <a>js中调用本地方法</a> <script> function funFromjs(){ document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js"; } var aTag = document.getElementsByTagName('a')[0]; aTag.addEventListener('click', function(){ //调用android本地方法 myObj.fun1FromAndroid("调用android本地方法fun1FromAndroid(String name)!!"); return false; }, false); </script> <p></p> <div id="helloweb"> </div></body>
第三步:
实现android工程与js交互的相关代码
android主题代码:
- @SuppressLint({ “JavascriptInterface”, “SetJavaScriptEnabled” })
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //初始化
- initViews();
- //设置编码
- mWebView.getSettings().setDefaultTextEncodingName(”utf-8”);
- //支持js
- mWebView.getSettings().setJavaScriptEnabled(true);
- //设置背景颜色 透明
- mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
- //设置本地调用对象及其接口
- mWebView.addJavascriptInterface(new JavaScriptObject(mContext), “myObj”);
- //载入js
- mWebView.loadUrl(”file:///android_asset/test.html”);
- //点击调用js中方法
- mBtn1.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- mWebView.loadUrl(”javascript:funFromjs()”);
- Toast.makeText(mContext, ”调用javascript:funFromjs()”, Toast.LENGTH_LONG).show();
- }
- });
- }
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" }) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化 initViews(); //设置编码 mWebView.getSettings().setDefaultTextEncodingName("utf-8"); //支持js mWebView.getSettings().setJavaScriptEnabled(true); //设置背景颜色 透明 mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0)); //设置本地调用对象及其接口 mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj"); //载入js mWebView.loadUrl("file:///android_asset/test.html"); //点击调用js中方法 mBtn1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mWebView.loadUrl("javascript:funFromjs()"); Toast.makeText(mContext, "调用javascript:funFromjs()", Toast.LENGTH_LONG).show(); } }); }js调用的android对象方法定义
- public class JavaScriptObject {
- Context mContxt;
- @JavascriptInterface //sdk17版本以上加上注解
- public JavaScriptObject(Context mContxt) {
- this.mContxt = mContxt;
- }
- public void fun1FromAndroid(String name) {
- Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
- }
- public void fun2(String name) {
- Toast.makeText(mContxt, ”调用fun2:” + name, Toast.LENGTH_SHORT).show();
- }
- }
public class JavaScriptObject { Context mContxt; @JavascriptInterface //sdk17版本以上加上注解 public JavaScriptObject(Context mContxt) { this.mContxt = mContxt; } public void fun1FromAndroid(String name) { Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show(); } public void fun2(String name) { Toast.makeText(mContxt, "调用fun2:" + name, Toast.LENGTH_SHORT).show(); }}
效果图:
。。。。
ps:据网友反应,在Android4.4以上不支持js的一些方法了,上面的思想大概是这样,要实用的大家可以参考这个开源项目:
https://github.com/lzyzsd/JsBridge
点击去下载整个demo工程
0 0
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- Android中Webview与JavaScript的交互(互相调用)
- Android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- android中Webview与javascript的交互(互相调用)
- Android中Webview与javascript的交互之间的互相调用
- Android中WebView和JavaScript(JS)的互相调用
- Android中WebView与Javascript的交互
- jira中api开放及Jira证书
- Android实现双进程守护
- PAT甲级1122
- CMake
- usaco 训练总结4
- android中Webview与javascript的交互(互相调用)
- spring+mybatis+c3p0数据库连接池或druid连接池使用配置整理
- 形参和实参的区别
- Laravel 5.1 事件、事件监听的简单应用
- 作为一名WebGIS工程师必备知识
- Object输入输出流
- okhttp的post用法
- android butterkinfe 8.5.1 配置 超简单
- ndk-build 添加window环境变量