android中利用webview调用网页上的js代码和注意事项

1.android中利用webview调用网页上的js代码。
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");
2. 网页上调用android中java代码的方法
在网页中调用java代码,需要在webview控件中添加javascriptInterface。如下所示:
mWebView.addJavascriptInterface(new Object() { 
            public void clickOnAndroid() { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                        Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();
                    } 
                }); 
            } 
        }, "demo");
在网页中,只需要像调用js方法一样,进行调用就可以
<div id='b'><a οnclick="window.demo.clickOnAndroid()">b.c</a></div>
3. Java代码调用js并传参
首先需要带参数的js函数,如function test(str),然后只需在调用js时传入参数即可,如下所示:
mWebView.loadUrl("javascript:test('aa')");
4.Js中调用java函数并传参
首先一样需要带参数的函数形式,但需注意此处的参数需要final类型,即得到以后不可修改,如果需要修改其中的值,可以先设置中间变量,然后进行修改。如下所示:
mWebView.addJavascriptInterface(new Object() { 
            public void clickOnAndroid(final int i) { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                                int j = i;
                                j++;
Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
                    }
                });
            } 
        }, "demo");
然后在html页面中,利用如下代码<div id='b'><a οnclick="window.demo.clickOnAndroid(2)">b.c</a></div>,
即可实现调用


注意事项:
(android webview js与android互动注意事项)
用2.3.1开发会出 
ERROR/InputDispatcher(61): channel '40723150 com.JavaScriptCom/com.JavaScriptCom.JavaScriptCom (server)' ~ Channel is unrecoverably broken and will be disposed!
这个错误,必须用2.1的模拟器,这个估计是BUG.


附代码:
AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.JavaScriptCom" android:versionCode="1"
    android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".JavaScriptCom" android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="7" />
</manifest> 


JavaScriptCom.java


package com.JavaScriptCom;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class JavaScriptCom extends Activity {
    final class runJavaScript {
        public void runOnAndroidJavaScript(final String str) {
            h.post(new Runnable() {
                // @Override
                public void run() { 
                    TextView show = (TextView) findViewById(R.id.show);
                    show.setText("This is a message from javascript:" + str);
                }


            });
        }
    }


    private EditText txt;
    private WebView wv;
    private Button btn;
    private Handler h = new Handler();
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setContentView(R.layout.main);
        txt = (EditText) findViewById(R.id.txt);
        wv = (WebView) findViewById(R.id.wv);
        btn = (Button) findViewById(R.id.btn);
        WebSettings webSettings = wv.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSaveFormData(false);
        webSettings.setSavePassword(false);
        webSettings.setSupportZoom(false);
        wv.addJavascriptInterface(new runJavaScript(), "myjs");
        String url = "file:///android_asset/android.html";
        wv.loadUrl(url);
        btn.setOnClickListener(new OnClickListener() {
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                wv.loadUrl("javascript:get4Android('"
                        + txt.getText().toString() + "')");
            }
        });
    }
}


android.html


<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function get4Android(str){
 document.getElementById("show").innerHTML="This is a message from android:"+str;
 }
function send2Android(){
 var str = document.getElementById("mess").value;
 window.myjs.runOnAndroidJavaScript(str);//调用android的函数
 }
</script>
</head>
<body>
 <input type="text" id="mess" />
 <input type="button" value="Send To Android"  οnclick="send2Android()"/>
<div id="show"></div>
</body>
</html>


main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <EditText android:id="@+id/txt" android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <Button android:id="@+id/btn" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="Send To JavaScript" />
    <TextView android:id="@+id/show" android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <WebView android:id="@+id/wv" android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值