android 掉js按钮方法,Android与JS交互的细节问题

1.首先准备一个test.html文档，如下：

js交互android

function show(){ var a = document.getElementById("text").value;

alert("警告，你输入的是："+a); }

function rfInfo(jsonStr) {

document.getElementById("info").innerHTML="从Android客户端传来的作者信息:"+jsonStr.Developer;

}

function cfm() {

if(confirm("确认界面提示?"))

{ return true;

}

else {

return false;

}

}

function pmt() {

var place = prompt("请输入位置?",""); }

从Android客户端传来的作者信息:

输入的信息:

value="Alert"/>

value="Confirm"/>

value="调用android方法"/>

注意看网页中《调用android方法》的button的点击事件，onclick中的内容就相当于指向android中adrdMethod()方法的id.

2.Android的布局文件如下：

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.alden.l_alden.jsandandroid.MainActivity">

android:id="@+id/btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="调用js方法"/>

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent" />

3.在WebView中加载test.html页面，并且与Android交互

界面.png

//

@SuppressLint("SetJavaScriptEnabled")

public class MainActivity extends AppCompatActivity {

private WebView webView;

private Button button;

final String jsonStr = "{\"Developer\":\"Alden\",\"Place\":\"Nanjing\"}";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

button = (Button) findViewById(R.id.btn);

webView.setWebChromeClient(new WebChromeClient()

{

/*此处覆盖的是javascript中的alert方法。

*当网页需要弹出alert窗口时，会执行onJsAlert中的方法

* 网页自身的alert方法不会被调用。

*/

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();

Log.d("info", "弹出了提示框");

result.confirm();

return true; }

/*此处覆盖的是javascript中的confirm方法。

*当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法

* 网页自身的confirm方法不会被调用。 */

@Override

public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {

Log.d("info", "弹出了确认框");

result.confirm();

return true; }

//在方法中写自己想要取代弹出js输入框的实现代码，比如一个Dialog

@Override

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

Log.d("info", "弹出了输入框");

result.confirm();

return true; }

/*

* 如果页面被强制关闭,弹窗提示：是否确定离开？

* 点击确定 保存数据离开，点击取消，停留在当前页面 */

@Override

public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {

Log.d("info", "弹出了离开确认框");

result.confirm();

return true; }

});

webView.setWebViewClient(new WebViewClient() {

/*点击页面的某条链接进行跳转的话，会启动系统的默认浏览器进行加载，调出了我们本身的应用

* 因此，要在shouldOverrideUrlLoading方法中

*/

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) { //使用当前的WebView加载页面 view.loadUrl(url); return true; }

/*

* 网页加载完毕(仅指主页，不包括图片)

*/

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

// TODO Auto-generated method stub

super.onPageStarted(view, url, favicon);

}

/*

* 网页加载完毕(仅指主页，不包括图片)

*/

@Override

public void onPageFinished(WebView view, String url)

{

// TODO Auto-generated method stub

super.onPageFinished(view, url);

}

/*

* 加载页面资源

*/

@Override

public void onLoadResource(WebView view, String url) {

// TODO Auto-generated method stub

super.onLoadResource(view, url);

}

/*

* 错误提示

*/

@Override

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

// TODO Auto-generated method stub

super.onReceivedError(view, errorCode, description, failingUrl);

} });

//支持js代码(必须要的)

webView.getSettings().setJavaScriptEnabled(true);

//设置是否支持缩放

webView.getSettings().setSupportZoom(false);

//js调用android的方法接口，第二个参数就相当于js对象找android中这个方法的钥匙，

webView.addJavascriptInterface(new Object(){

//此方法内容须创建子线程操作，不然会出现下面这个错误

//Uncaught Error: Error calling method on NPObject

@JavascriptInterface

public void adrdMethod() {

new Thread(new Runnable() {

@Override

public void run() {

Log.d("info", "js调用了Android方法");

}

}).start();

}

},"demo");

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Log.d("info", "Android调用了js方法");

/*

* 通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称为xxx的javascript方法

*/

webView.loadUrl("javascript:rfInfo("+jsonStr+")"); }

});

webView.loadUrl("file:///android_asset/test.html"); }}

总结：

1.Android调用js中的方法：

通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称为xxx的javascript方法

2.js调用Android中的方法：

webView.addJavascriptInterface(Object object,String str)：第一个参数是一个类对象，第二个参数是js中调用此类中的方法的标识

3.js调用的android的方法中的操作需要在子线程中，不然报错

Uncaught Error: Error calling method on NPObject ；

4.首先你要支持js代码(必须要的)

webView.getSettings().setJavaScriptEnabled(true);