查看: 1815|回复: 0

[Android教程] android中Webview与javascript如何互相调用?

发表于 2017-1-4 22:14:07
最近做 Android 项目http://www.maiziedu.com/course/android/中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下androidjs互相调用的过程。如下demodemo的主要实现过程如下:通过加载本地的html文件(里面有js脚本),实现android本地方法和js中的交互。
  首先讲很重要的一步 androidstudio 运行人员 需要在build 文件上添加
  sourceSets {
  main {
  manifest.srcFile 'src/main/AndroidManifest.xml'
  java.srcDirs = ['src/main/java']
  res.srcDirs = ['src/main/res']
  assets.srcDirs = ['src/main/assets']
  }
  }
  第一步:
  mainfest.xml中加入网络权限
  <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>
  第三步:
  实现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();
  }
  });
  }
  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();
  }
  }

来源:简书



回复

使用道具 举报