webview_android 与js调用

原创 2017年01月03日 09:36:37

1.Webview的使用

•WebView(网络视图)能加载显示网页

•String pathUrl = "https://www.youxuanbao.cn";

•webview = (WebView) findViewById(R.id.webview);

•webview.loadUrl(pathUrl);

2.Webview与js的交互

•在交互之前需要设置的参数

•WebSettings webSettings = mWebView.getSettings();

•webSettings.setJavaScriptEnabled(true);//Android容许执行js脚本需要设置

•//Android(Java)与js(HTML)交互的接口函数 jsObj 为桥连对象

•mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");

•mWebView.loadUrl("file:///android_asset/index.html");

3.Android与JavaScript交互的四种情况

1)HTML中js调用Android(Java)代码

2)HTML中js调用Android(Java)代码(带参数)

3)Android(Java)调用HTML中js代码

4)HTML中js调用Android(Java)代码(带参数)

4.说明

•Android访问url网址,需在AndroidManifest.xml文件,配置容许访问网络的权限:
<uses-permission android:name="android.permission.INTERNET" />

•Android(Java)调用js(HTML)时,使用的mWebView.loadUrl("javascript: showFromHtml()");函数需在UI线程运行,因为mWebView为

网络的权限:
<uses-permission android:name="android.permission.INTERNET" />

•Android(Java)调用js(HTML)时,使用的mWebView.loadUrl("javascript: showFromHtml()");函数需在UI线程运行,因为mWebView为UI

网络的权限:
<uses-permission android:name="android.permission.INTERNET" />

•Android(Java)调用js(HTML)时,使用的mWebView.loadUrl("javascript: showFromHtml()");函数需在UI线程运行,因为mWebView为UI控件

 

下面示例总结这四种情况,直接上干货:

 

1) Android(Java)

    private Object getHtmlObject(){
        Object insertObj = new Object(){

            //HTML中js调用Android(Java)代码
            public String HtmlcallJava(){
                return "Html call Java";
            }
            // HTML中js调用Android(Java)代码(带参数)
            public String HtmlcallJava2(final String param){
                return "Html call Java : " + param;
            }
            //Android(Java)访问js(HTML)代码
            @SuppressWarnings("unused")
            public void JavacallHtml(){
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //Android(Java)访问js(HTML)端代码是通过loadUrl函数实现
                        mWebView.loadUrl("javascript: showFromHtml()");
                        Toast.makeText(JSAndroidActivity.this, "clickBtn", Toast.LENGTH_SHORT).show();
                    }
                });
            }
            //Android(Java)调用HTML中js代码(带参数)
            public void JavacallHtml2(){
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.loadUrl("javascript: showFromHtml2('IT-homer blog')");
                        Toast.makeText(JSAndroidActivity.this, "clickBtn2", Toast.LENGTH_SHORT).show();
                    }
                });
            }
        };

        return insertObj;
    }

 

2) js(HTML)

<meta charset="utf-8">
<title>jsandroid_test</title>
<script type="text/javascript" language="javascript"> 
    
    function showHtmlcallJava(){
        var str = window.jsObj.HtmlcallJava();
        alert(str);
    }
    
    function showHtmlcallJava2(){
        var str = window.jsObj.HtmlcallJava2("IT-homer blog");
        alert(str);
    }
    function showFromHtml(){
        document.getElementById("id_input").value = "Java call Html";
    }
    
    function showFromHtml2(param){
        document.getElementById("id_input2").value = "Java call Html : " + param; 
    }
</script>


</head>


<body>

webview– js与android之间的交互
<br>
<br>
<input type="button" value="HtmlcallJava" onclick="showHtmlcallJava()" />
<br>
<br>
<input type="button" value="HtmlcallJava2" onclick="showHtmlcallJava2()" />
<br>
<br>
<input id="id_input" style="width: 90%" type="text" value="null" />
<br>
<br>
<input type="button" value="JavacallHtml" onclick="window.jsObj.JavacallHtml()" />
<br>
<br>
<input id="id_input2" style="width: 90%" type="text" value="null" />
<br>
<br>
<input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />


</body>


</html>

实现不同js中方法相互调用

如果在同一个页面中,不同Js中的方法是可以相互调用的,如 A.js: Function  aa(obj)(){alert(“faf”);} 此时表示的是在a.js存在着一个js方法,并且这个方法...
  • memgxingfeixiang
  • memgxingfeixiang
  • 2016年09月09日 15:17
  • 4951

JS调用Android里面的方法,Android调用JS里面的方法

Android WebView     在公司Android的开发过程中遇到一个新的问题,那就是让Java代码和Javascript代码进行交互,然后在网上找到了关于webView的资料,之前并没...
  • hj563308597
  • hj563308597
  • 2015年04月22日 17:15
  • 56549

制作供js调用的dll并调用

本文通过vs2010制作可以供
  • dylwildwolf
  • dylwildwolf
  • 2014年07月11日 15:13
  • 3541

如何在html中调用js

一、JavaScript脚本语言的特性 JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性: 1、在客户端执行。完全在用户的计算机上运行,无须经过服务器。 2...
  • linshichen
  • linshichen
  • 2016年03月08日 11:34
  • 252

js如何调用ocx控件

最近做硬件相关的项目,厂商提供的ocx控件,需要在js中通过ocx控件调用c写的代码。在此做个笔记: 1.对于64位机器,将厂商提供的.dll文件拷贝到 C:\Windows\System32 目录下...
  • buttery_fly
  • buttery_fly
  • 2016年11月01日 16:16
  • 1509

iOS js oc相互调用(JavaScriptCore)(二)

上节地址 http://blog.csdn.net/lwjok2007/article/details/47058101 接着上节我们讲到的iOS调用js 下来我们使用js调用iOS js调用iOS分...
  • lwjok2007
  • lwjok2007
  • 2015年07月25日 19:32
  • 81696

OC与JS互相调用

最近项目中要用到html5来实现,涉及到OC调用JS,以及JS调用OC的方法,这里把遇到的问题以及实现方法介绍一下。// // ViewController.h // OC_And_JS // /...
  • jwzhangjie
  • jwzhangjie
  • 2015年07月10日 00:27
  • 29024

6- js 函数的四种调用方式

6. 函数的四种调用方式函数有下列调用模式 函数调用模式 方法调用模式 构造器模式 上下文模式 1. 函数调用 模式要调用,就肯定要先定义,函数的定义方式: 声明式: function fuc...
  • qq_16415157
  • qq_16415157
  • 2016年11月04日 13:41
  • 2663

【Web前端】---js调用本地应用程序

最近,项目组里面有一个新的需求,高拍仪导入
  • u013045878
  • u013045878
  • 2015年12月13日 23:22
  • 5848

多种方式实现JS调用后台方法进行数据交互

多种方式实现JS调用后台方法进行数据交互     项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性、Button提交表...
  • u011233568
  • u011233568
  • 2015年04月29日 14:25
  • 2309
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webview_android 与js调用
举报原因:
原因补充:

(最多只允许输入30个字)