android与js交互实现什么功能

发布网友发布时间：2022-04-19 20:27

共3个回答

懂视网时间：2022-04-23 08:56

本篇文章介绍的内容是关于android 与js的简单交互的代码，现在分享给大家，有需要的朋友参考一下

权限：

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

MainActicity：

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;


/**
 * 注意事项：如何避免WebView内存泄露？
 * 不在xml中定义 Webview ，而是在需要的时候在Activity中创建，并且Context使用 getApplicationgContext()
 * <p>
 * 在 Activity 销毁（ WebView ）的时候，
 * 先让 WebView 加载null内容，然后移除 WebView，再销毁 WebView，最后置空
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {


 private WebView web;
 private Button but;
 private Button but2;
 private WebSettings settings;
 private Button but3;




 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 but = findViewById(R.id.but);
 but2 = findViewById(R.id.but2);
 but3 = findViewById(R.id.but3);
 web = findViewById(R.id.web);




 but.setOnClickListener(this);
 but2.setOnClickListener(this);
 but3.setOnClickListener(this);


 //声明WebSettings子类
 settings = web.getSettings();
 //如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
 settings.setJavaScriptEnabled(true);
 //设置自适应屏幕，两者合用
 settings.setUseWideViewPort(true); //将图片调整到适合webview的大小
 settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
 // 设置与Js交互的权限
 settings.setJavaScriptEnabled(true);
 // 设置允许JS弹窗
 settings.setJavaScriptCanOpenWindowsAutomatically(true);
 // 先载入JS代码

 // 复写shouldOverrideUrlLoading()方法，使得打开网页时不调用系统浏览器， 而是在本WebView中显示
 web.setWebViewClient(new WebViewClient() {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
  view.loadUrl(url);
  return true;
  }
 });




 // 由于设置了弹窗检验调用结果,所以需要支持js对话框
 // webview只是载体，内容的渲染需要使用webviewChromClient类去实现
 // 通过设置WebChromeClient对象处理JavaScript的对话框
 //设置响应js 的Alert()函数(回调方法)
 web.setWebChromeClient(new WebChromeClient() {
  @Override
  public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
  AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
  b.setTitle("Alter");
  b.setMessage(message);
  b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
   @Override
   public void onClick(DialogInterface dialog, int which) {
   result.confirm();
   }
  });
  b.setCancelable(false);
  b.create().show();
  return true;
  }
 });










 }


 @Override
 public void onClick(View view) {
 switch (view.getId()) {
  //获取本地html文件
  case R.id.but:
  web.loadUrl("file:///android_asset/index.html");
  break;
  //与js交互
  case R.id.but2:


  web.post(new Runnable() {
   @Override
   public void run() {
    // 格式规定为:file:///android_asset/文件名.html
    web.loadUrl("file:///android_asset/webview.html");
    web.loadUrl("javascript:callJs()");


   }
   });




  break;
  case R.id.but3:
  web.loadUrl("http://www.baidu.com/");


  break;


 }




 }




 //销毁
 @Override
 protected void onDestroy() {
 if (web != null) {
  web.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
  web.clearHistory();


  ((ViewGroup) web.getParent()).removeView(web);
  web.destroy();
  web = null;
 }


 super.onDestroy();
 }
}


xml：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.example.webview_js.MainActivity">


 <Button
 android:id="@+id/but"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="点我调用本地html文件" />


 <Button
 android:text="点我调用网站"
 android:id="@+id/but3"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />


 <Button
 android:id="@+id/but2"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="点我与Js交互" />


 <WebView
 android:id="@+id/web"
 android:layout_width="match_parent"
 android:layout_height="match_parent"></WebView>




</LinearLayout>


html文件（js）：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			function callJs(){
				alert("android调用了JS的call方法")
			}
			
		</script>
	</head>
	<body>
		
		
	</body>
</html>

热心网友时间：2022-04-23 06:04

Android与js交互可以互通信息
互通信息的就是你可以告诉我做什么或者我可以让你做什么
具体功能：一个是可以实现热更新，通过js创建Android组件并对出错的信息进行实时修复。
还有个是两方可以互通API调用，把js的灵活性和native的易用性结合

热心网友时间：2022-04-23 07:22

第一步：
mainfest.xml中加入网络权限

[java] view plain copy
<uses-permission android:name="android.permission.INTERNET" />
第二步：

加载本地写好的html文件（定义好js中提供给android调用的方法 funFromjs(),和android提供给js调用的对象接口fun1FromAndroid(String name)）,放在 assets目录下。

[html] view plain copy
<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主题代码：

[java] view plain copy
@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对象方法定义

[java] view plain copy
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();
}
}

首页

文章

android与js交互实现什么功能