首页 web前端 js教程 android 与js的简单交互

android 与js的简单交互

Apr 10, 2018 pm 01:39 PM
android javascript 简单

本篇文章介绍的内容是关于android 与js的简单交互的代码,现在分享给大家,有需要的朋友参考一下

权限:



MainActicity:

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;


/**
 * 注意事项:如何避免WebView内存泄露?
 * 不在xml中定义 Webview ,而是在需要的时候在Activity中创建,并且Context使用 getApplicationgContext()
 * <p>
 * 在 Activity 销毁( WebView )的时候,
 * 先让 WebView 加载null内容,然后移除 WebView,再销毁 WebView,最后置空
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private WebView web;
    private Button but;
    private Button but2;
    private WebSettings settings;
    private Button but3;




    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        but = findViewById(R.id.but);
        but2 = findViewById(R.id.but2);
        but3 = findViewById(R.id.but3);
        web = findViewById(R.id.web);




        but.setOnClickListener(this);
        but2.setOnClickListener(this);
        but3.setOnClickListener(this);


        //声明WebSettings子类
        settings = web.getSettings();
        //如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
        settings.setJavaScriptEnabled(true);
        //设置自适应屏幕,两者合用
        settings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
        // 设置与Js交互的权限
        settings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 先载入JS代码

        // 复写shouldOverrideUrlLoading()方法,使得打开网页时不调用系统浏览器, 而是在本WebView中显示
        web.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });




        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体,内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数(回调方法)
        web.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alter");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
        });










    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            //获取本地html文件
            case R.id.but:
                web.loadUrl("file:///android_asset/index.html");
                break;
            //与js交互
            case R.id.but2:


                web.post(new Runnable() {
                        @Override
                        public void run() {
                            // 格式规定为:file:///android_asset/文件名.html
                            web.loadUrl("file:///android_asset/webview.html");
                            web.loadUrl("javascript:callJs()");


                        }
                    });




                break;
            case R.id.but3:
                web.loadUrl("http://www.baidu.com/");


                break;


        }




    }




    //销毁
    @Override
    protected void onDestroy() {
        if (web != null) {
            web.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            web.clearHistory();


            ((ViewGroup) web.getParent()).removeView(web);
            web.destroy();
            web = null;
        }


        super.onDestroy();
    }
}


xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.webview_js.MainActivity">


    <Button
        android:id="@+id/but"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点我调用本地html文件" />


    <Button
        android:text="点我调用网站"
        android:id="@+id/but3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


    <Button
        android:id="@+id/but2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点我与Js交互" />


    <WebView
        android:id="@+id/web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>




</LinearLayout>


html文件(js):
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			function callJs(){
				alert("android调用了JS的call方法")
			}
			
		</script>
	</head>
	<body>
		
		
	</body>
</html>
登录后复制

相关推荐:

Ajax()与后台交互步骤详解

android与js的交互之jsbridge使用

Ajax+PHP的数据交互实现

以上是android 与js的简单交互的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

新报告对传闻中的三星 Galaxy S25、Galaxy S25 Plus 和 Galaxy S25 Ultra 相机升级进行了严厉的评估 新报告对传闻中的三星 Galaxy S25、Galaxy S25 Plus 和 Galaxy S25 Ultra 相机升级进行了严厉的评估 Sep 12, 2024 pm 12:23 PM

最近几天,Ice Universe 不断披露有关 Galaxy S25 Ultra 的详细信息,人们普遍认为这款手机将是三星的下一款旗舰智能手机。除此之外,泄密者声称三星只计划升级一款相机

三星 Galaxy S25 Ultra 泄露了第一张渲染图,传闻中的设计变化被曝光 三星 Galaxy S25 Ultra 泄露了第一张渲染图,传闻中的设计变化被曝光 Sep 11, 2024 am 06:37 AM

OnLeaks 现在与 Android Headlines 合作,首次展示了 Galaxy S25 Ultra,几天前,他试图从他的 X(以前的 Twitter)粉丝那里筹集到 4,000 美元以上的资金,但失败了。对于上下文,嵌入在 h 下面的渲染图像

IFA 2024 | TCL 的 NXTPAPER 14 在性能上无法与 Galaxy Tab S10 Ultra 相媲美,但在尺寸上几乎可以与之媲美 IFA 2024 | TCL 的 NXTPAPER 14 在性能上无法与 Galaxy Tab S10 Ultra 相媲美,但在尺寸上几乎可以与之媲美 Sep 07, 2024 am 06:35 AM

除了发布两款新智能手机外,TCL 还发布了一款名为 NXTPAPER 14 的新 Android 平板电脑,其大屏幕尺寸是其卖点之一。 NXTPAPER 14 采用 TCL 标志性品牌哑光液晶面板 3.0 版本

新报告对传闻中的三星 Galaxy S25、Galaxy S25 Plus 和 Galaxy S25 Ultra 相机升级进行了严厉的评估 新报告对传闻中的三星 Galaxy S25、Galaxy S25 Plus 和 Galaxy S25 Ultra 相机升级进行了严厉的评估 Sep 12, 2024 pm 12:22 PM

最近几天,Ice Universe 不断披露有关 Galaxy S25 Ultra 的详细信息,人们普遍认为这款手机将是三星的下一款旗舰智能手机。除此之外,泄密者声称三星只计划升级一款相机

Vivo Y300 Pro 在 7.69 毫米纤薄机身中配备 6,500 mAh 电池 Vivo Y300 Pro 在 7.69 毫米纤薄机身中配备 6,500 mAh 电池 Sep 07, 2024 am 06:39 AM

Vivo Y300 Pro刚刚全面亮相,它是最薄的中端Android手机之一,配备大电池。准确来说,这款智能手机的厚度仅为 7.69 毫米,但配备了 6,500 mAh 的电池。这与最近推出的容量相同

三星 Galaxy S24 FE 预计将以低于预期的价格推出,有四种颜色和两种内存选项 三星 Galaxy S24 FE 预计将以低于预期的价格推出,有四种颜色和两种内存选项 Sep 12, 2024 pm 09:21 PM

三星尚未就何时更新其 Fan Edition (FE) 智能手机系列提供任何提示。目前来看,Galaxy S23 FE 仍然是该公司的最新版本,于 2023 年 10 月年初推出。

小米红米 Note 14 Pro Plus 上市,成为首款配备 Light Hunter 800 摄像头的高通 Snapdragon 7s Gen 3 智能手机 小米红米 Note 14 Pro Plus 上市,成为首款配备 Light Hunter 800 摄像头的高通 Snapdragon 7s Gen 3 智能手机 Sep 27, 2024 am 06:23 AM

Redmi Note 14 Pro Plus 现已正式成为去年 Redmi Note 13 Pro Plus 的直接后继产品(亚马逊售价 375 美元)。正如预期的那样,Redmi Note 14 Pro Plus与Redmi Note 14和Redmi Note 14 Pro一起成为Redmi Note 14系列的主角。李

iQOO Z9 Turbo Plus:可能增强的系列旗舰产品已开始预订 iQOO Z9 Turbo Plus:可能增强的系列旗舰产品已开始预订 Sep 10, 2024 am 06:45 AM

OnePlus的姐妹品牌iQOO的2023-4年产品周期可能即将结束;尽管如此,该品牌已宣布 Z9 系列的开发尚未结束。它的最终版,也可能是最高端的 Turbo+ 变体刚刚按照预测发布。时间

See all articles