android原生控件与javascript简单交互!

最新推荐文章于 2022-12-30 15:27:55 发布

高山流水哗哗哗

最新推荐文章于 2022-12-30 15:27:55 发布

阅读量391

点赞数 1

分类专栏： android 技巧文章标签： android webview javascript

本文链接：https://blog.csdn.net/qq_32937131/article/details/66972138

版权

android 技巧专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇文章简答说一下代码的方式,来进行调用网页的功能,同时网页的点击也能调用android原生的功能

不说多的直接就贴代码了图片懒得截图了,想测试的直接复制过去,就是点击android按钮弹出网页的对

话框,点击网页的按钮弹一个androud的吐司

下面是Android端代码

package com.ewininfo.mywindows;

import android.annotation.SuppressLint;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

import com.ewininfo.mywindows.activity.ShowActivity;
import com.ewininfo.mywindows.uiuts.Uiuts;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

import static com.ewininfo.mywindows.R.id.webview;

/**
 * 创建者:  gs
 * 版权:  
 * 描述:    
 * Created by gsh on 2017/3/6.
 */

public class MainActivity extends AppCompatActivity {
    //再sdk17以后就会出现漏洞 需要添加这个注解
    @SuppressLint({ "SetJavaScriptEnabled", "AddJavascriptInterface" })

    @Bind(R.id.toast2)
    Button mToast2;
    @Bind(R.id.toast5)
    Button mToast5;
    @Bind(R.id.sanckbar6)
    Button mSanckbar6;
    @Bind(webview)
    WebView mWebview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        WebSettings settings = mWebview.getSettings();
        // 设置WebView支持JavaScript
        settings.setJavaScriptEnabled(true);
        //支持自动适配
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setSupportZoom(true);  //支持放大缩小
        settings.setBuiltInZoomControls(true); //显示缩放按钮
        //设置不让其跳转浏览器
        mWebview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url){
                return false;
            }
        });

        // 添加客户端支持
        mWebview.setWebChromeClient(new WebChromeClient());
        textjs();


    }

    @OnClick({R.id.Dialog1, R.id.toast2, R.id.sanckbar3, R.id.Dialog4, R.id.toast5, R.id.sanckbar6})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.toast2:
                Toast.makeText(Uiuts.getContext(), "你点击js交互", Toast.LENGTH_SHORT).show();
                break;
            case R.id.toast5:
                mWebview.loadUrl(TEXTURL);
                break;
            case R.id.sanckbar6:
                mWebview.loadUrl("javascript:callFromJava('我是javascript')");
                break;
        }
    }

    private void textjs() {
        mWebview.addJavascriptInterface(new Object() {
            @JavascriptInterface
            public void text(String demo){
                Uiuts.showToast(Uiuts.getContext(), demo);
            }
        },"incast");
    }
    //拦截里返回键
    @Override
    public void onBackPressed() {
        //判断能不能跳到上一个页面
        if (mWebview.canGoBack()) {
            mWebview.goBack();//返回上一页
        } else {
            finish();
        }
    }

}

下面是h5页面的代码,能力有限,就写了个很简单的

<html>
	<head>
	<meat charset="utf-8">
	<title>测试</title>
	<script type="text/javascript">
		function showToast(demo){
		//这里调用java代码
		window.incast.text(demo);
		}
		function callFromJava(demo){
				alert(demo);
		}
	</script>
	</head>
	<body>
	<button οnclick="alert('你好!')">点我,点我</button><br/><br/>
	<button οnclick="showToast('我是android')">显示Toast</button>
	</body>
</html>

上面共有三个按钮

Android原生Toast

 Toast.makeText(Uiuts.getContext(), "你点击js交互", Toast.LENGTH_SHORT).show();

是显示h5页面,

mWebview.loadUrl(TEXTURL);

点击Android原生按钮弹出网页的对话框

mWebview.loadUrl("javascript:callFromJava('我是javascript')");

这段代码就是点击网页android页面上弹出Toast

    private void textjs() {
        mWebview.addJavascriptInterface(new Object() {
            @JavascriptInterface
            public void text(String demo){
                Uiuts.showToast(Uiuts.getContext(), demo);
            }
        },"incast");
    }

注意:这个注解必须加,不加会报错

    //再sdk17以后就会出现漏洞 需要添加这个注解
    @SuppressLint({ "SetJavaScriptEnabled", "AddJavascriptInterface" })

其实代码很简单,就几句代码,需要h5那边一起协作,名字取一样就行了,好了就这样,可以自己试试

高山流水哗哗哗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android原生控件与javascript简单交互!

这篇文章简答说一下代码的方式,来进行调用网页的功能,同时网页的点击也能调用android原生的功能不说多的直接就贴代码了图片懒得截图了,想测试的直接复制过去,就是点击android按钮弹出网页的对话框,点击网页的按钮弹一个androud的吐司下面是Android端代码package com.ewininfo.mywindows;import android.annotation
复制链接

扫一扫

专栏目录