Coin163

首页 > android中Webview与javascript的交互(互相调用)

android中Webview与javascript的交互(互相调用)

2021腾讯云限时秒杀,爆款1核2G云服务器298元/3年!(领取2860元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1062

2021阿里云最低价产品入口+领取代金券(老用户3折起),
入口地址https://www.aliyun.com/minisite/goods

相关推荐:Android WebView 与JS的数据交互

关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及实现。   Android API中提供了WebView组件来实现对html的渲染。所

 最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主要实现过程如下:通过加载本地的html文件(里面有js脚本),实现android本地方法和js中的交互。 第一步: mainfest.xml中加入网络权限 [java] view plain copy print ? <uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.INTERNET" />第二步: 加载本地写好的html文件(定义好js中提供给android调用的方法 funFromjs(),和android提供给js调用的对象接口fun1FromAndroid(String name)),放在 assets目录下。 [html] view plain copy print ? <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主题代码: [java] view plain copy print ? @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");

相关推荐:Android在WebView中与JS的交互

项目要求,在一个网页中跳转Activity,作为一个成长中的小白鼠,我以为实现不了,后台的哥们告诉我可以在H5页面中调用JS实现Activity跳转,经过一天的研究,终于实现了,拿来与大家分享一下 WebView的使用请戳我之前写的博客:http://blog.csdn.net/sinat_164

//点击调用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对象方法定义 [java] view plain copy print ? 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工程

原文

 最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主要实现过程如下:通

------分隔线----------------------------