Js与webView交互

学习目标:

Js与webView交互

学习内容:

首先,第一步,我们需要先定义一些android的原生方法
public class Android {

 	SharedPreferences sp;
 	
    @JavascriptInterface
    public void save(String username, String password) {
        sp = Application.getInstance().getSharedPreferences("SHARE_COOKIE", Context.MODE_PRIVATE);
    //保存用户名和密码
        sp.edit().putString("username":, username).apply();
        sp.edit().putString("password", password).apply();
    }
}

第二步,进行注册

//设置WebView属性,能够执行Javascript脚本
webView.getSettings().setJavaScriptEnabled(true);
//设置给WebView的调用关键字为 android
webView.addJavascriptInterface(new Android(), "android");

这样我们就能在webView中使用

android.save(username,password);

这样就基本实现了交互功能 ,接下来举几个实例,比如,当你的项目是混合开发(android+html),当webView实现自动登录的时候,该怎么做呢?

 String homeUrl = "https://shop.xyz/login";
 webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url != null&&!TextUtils.isEmpty(url)) {
                    view.loadUrl(url);
                }
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
            	//页面加载结束
                super.onPageFinished(view, url);
               //自动登录Js注入
                autoLogin(view, url);
            }
        });
        webView.loadUrl(homeUrl);
    //注册js方法到webView
    private void autoLogin(WebView view, String url) {
    //只给登录页面注入Js
        if (url.contains("https://shop.xyz/login")) {
            username = sp.getString("username","");
            passwd = sp.getString("password","");
            if ((userName != null && !TextUtils.isEmpty(userName)) &&
                    (passWord != null && !TextUtils.isEmpty(passWord))) {
                //登录成功并且没有退出    
                StringBuilder jsBuilder = new StringBuilder();
                //注入模拟登录按钮点击的js
                jsBuilder.append("var script = document.createElement('script');");
                jsBuilder.append("script.type = 'text/javascript';");
                jsBuilder.append("document.getElementById('username').value = '" + username + "';");
                jsBuilder.append("document.getElementById('passd').value = '" + passwd + "';");
                jsBuilder.append("document.getElementById('btn_login').click();");
                view.loadUrl("javascript:" + jsBuilder.toString());
            }else{
            	//新用户登录
                StringBuilder jsBuilder = new StringBuilder();
                //保存密码js
                jsBuilder.append("var script = document.createElement('script');");
                jsBuilder.append("script.type = 'text/javascript';");
                jsBuilder.append("var child = document.getElementById('btn_login');" +
                        "child.onclick = function(){android.save(document.getElementById('username').value,document.getElementById('passd').value);};");
                view.loadUrl("javascript:" + jsBuilder.toString());
            }
        }
    }

另外还需要一些配置,可以根据情况进行相应的增减

		//必须
		webView.getSettings().setJavaScriptEnabled(true);
		webView.addJavascriptInterface(new Android(), "android");
		//选择
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAppCacheEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setSupportMultipleWindows(true);
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        //设置加载进来的页面自适应手机屏幕
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setLoadWithOverviewMode(true);
        

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值