WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互。

其坑无数,相信用过的都知道,一个一个来解决吧。

1.怎么互调:

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function android(bl){
if(bl){
document.getElementById("ap").innerHTML= "是true啊参数传过来了"
}else{
document.getElementById("ap").innerHTML= "改变了段落的文字"
}
}
function self(){
document.getElementById("btn").innerHTML= "javascript改变按钮文字"
}
</script>
</head>
<body>
<div>
<p id="ap">这是一个段落</p>
<button onclick="window.hello.showAndroid()">点击Toast</button>
<button onclick="self()" id="btn">javascriptzi自己的方法</button>
</div>
</body>
</html>

上面是js代码 ,下面是android代码:

public class MyWebViewtest extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webviewtest_layout);
initView();
} private void initView() {
final WebView webView = (WebView) findViewById(R.id.my_web);
webView.loadUrl("file:///android_asset/webviewtest.html"); WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JiaoHu(),"hello"); Button btn = (Button) findViewById(R.id.get_js);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webView.loadUrl("javascript:android(true)");
}
});
} public class JiaoHu{
@JavascriptInterface
public void showAndroid(){
Toast.makeText(MyWebViewtest.this,"js调用了android的方法",Toast.LENGTH_SHORT).show();
}
}
}
js调用android方式: <button onclick="window.hello.showAndroid()">点击Toast</button>
hello指的是类(接口)的别名 ,在我们上面的代码中也就是JiaoHu类 , showAndroid()是方法名,所以android和js要约定好的就是 类的别名 以及 方法名 即可调用成功。
android调用js方式:webView.loadUrl("javascript:android(true)");
android()为js中定义好的一个方法名,我们可以在android代码中传入一个参数true,在js中便能接收到,执行 document.getElementById("ap").innerHTML= "是true啊参数传过来了" 这一句。

2.坑之一(webview中js的方法不能执行):

web组的同事在采用 ajax 框架请求后台数据的时候,我这里则无法显示,原因少了一句话:

webView.getSettings().setDomStorageEnabled(true);  //很关键!!!!

这句代码让android能读取js的节点,也就可以执行了

3.坑之二(webView中h5变形记):

我们做的活动是类似于这样的

然鹅,当点击了输入框,弹出软键盘,变成这样的:

没错,妈的变形了(变形记),这个需要前端同事将window的高度设置为定长(之前height=100%)

 var HEIGHT = $('body').height();
$(window).resize(function() {
$('.main').height(HEIGHT);
});

可以的,这个解决了。

坑之三(js中操作android的UI了 导致 java.lang.IllegalStateException: Calling View methods on another thread than the UI thread.at 异常):

这是最恶心的,没有之一,之前没遇到过。

我们活动中要集成umeng分享,分享到微信,分享到朋友圈都没有问题(更神奇的是做的时候还是ok的,提交给测试的时候就变卦了,日了狗了)。

涉及到一个操作UI的问题,那我们肯定要将js调用我们的代码放在UI线程中啊

runOnUiThread(new Runnable() {
@Override
public void run() {
// Code for WebView goes here
}
});

这个自然没问题,也就是要把我们注解的方法的内容放在UI线程中跑,但是你的 类 你的 接口 他不是Activity啊 没有runOnUiThread方法啊 。

急中生智,让我们的类 继承 Activity

public class FreeFlowInterface extends Activity

ok,现在就可以了,然后在这么一来

@JavascriptInterface
public void shareToFriend(){
runOnUiThread(new Runnable() {
@Override
public void run() {
Bitmap bitmap = drawableToBitmap(R.drawable.sharepic);
mShareController = UmengShareUtils.share(activity,mShareController,shareTitle,shareContent,targetUrl,bitmap);
}
});
}

坑真的不少,且行且小心。

WebView中JS调用Android Method 遇到的坑整理的更多相关文章

  1. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  2. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  3. Xamarin Android Webview中JS调用App中的C#方法

    参考链接:https://github.com/xamarin/recipes/tree/master/Recipes/android/controls/webview/call_csharp_fro ...

  4. WebView之js调用Android类的方法传递数据

    1,具体的思路如下: 在android中写一个Activity,里面写一个webview,这个webview加载本地的一个html文件,显示这个网页,这个网页包括一个用户名和密码的输入框和两个按钮(只 ...

  5. [转]JS调用Android里面的方法,Android调用JS里面的方法

    FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...

  6. js调用android本地java代码

    js调用android本地java代码 当在Android上使用WebView控件开发一个Web应用时,可以创建一个通过Javascript调用Android端java代码的接口.也就是可以通过Jav ...

  7. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  8. C# winForm webBrowser页面中js调用winForm类方法(转)

      有时我们在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部:   1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类 ...

  9. CEF3中js调用delphi内部方法

    2015-01-20修改:以下方法不适合delphi7,在CEF3源码中限制了delphi_14 up,对于被我误导的朋友说声抱歉 在CEF1中JS调用delphi的方法已经贴过:http://www ...

随机推荐

  1. 踩坑记录:spring boot的POST请求数据注入不了的问题

    概述: 今天在使用spring boot框架的时候,踩了一个坑,是关于control层request body依赖注入的问题的,内容如下: 进过: 由于目前公司采用的系统架构,要求把springboo ...

  2. npm i和npm install的区别

    最近人用npm i来直接安装模块,但是有会报错,用npm install就不会报错,刚开始百思不得其解,它俩明明是同一个东西 后来查npm的帮助指令发现还是没区别,npm i仅仅是npm instal ...

  3. Android 通过 JNI 访问 Java 字段和方法调用

    在前面的两篇文章中,介绍了 Android 通过 JNI 进行基础类型.字符串和数组的相关操作,并描述了 Java 和 Native 在类型和签名之间的转换关系. 有了之前那些基础,就可以实现 Jav ...

  4. 学习笔记45—Linux压缩集

    1.压缩功能 安装 sudo apt-get install rar 卸载 sudo apt-get remove rar 2.解压功能 安装 sudo apt-get install unrar 卸 ...

  5. webpack踩坑之路 (2)——图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. ...

  6. python中的面向对象学习以及类的多态

    接下来类的第三个重要的特性:多态(一种接口,多种实现) 多态性(polymorphisn)是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特 ...

  7. (转)C#中base关键字的几种用法

    base其实最大的使用地方在面相对性开发的多态性上,base可以完成创建派生类实例时调用其基类构造函数或者调用基类上已被其他方法重写的方法.例如: 2.1关于base调用基类构造函数 public c ...

  8. dynamic遇上ADO.NET

    传说中的dynamic dynamic是个不合群.不按规则办事的家伙,可以说是个异形,但更恐怖的是它又是无所不知的,任何事情都难不了它(咳咳,它似乎与Lambda表达式是死对头).这令人想起<死 ...

  9. 雷林鹏分享:C# 常量

    C# 常量 常量是固定值,程序执行期间不会改变.常量可以是任何基本数据类型,比如整数常量.浮点常量.字符常量或者字符串常量,还有枚举常量. 常量可以被当作常规的变量,只是它们的值在定义后不能被修改. ...

  10. 荧光原位杂交技术 RNA-FiSH (fluorescence in situ hybridization)

    通俗理解:带有荧光标记的DNA探针可以用于检测活体内特定基因的表达情况,活体成像. 荧光原位杂交方法是一种物理图谱绘制方法,使用荧光素标记探针,以检测探针和分裂中期的染色体或分裂间期的染色质的杂交.荧 ...