解决支付宝WEB支付界面模块在Android上自动滑动到登录模块的问题

问题描述

支付宝web端支付页面如上，默认页面是扫码界面。我现在遇到这么一个需求，在Android电视端展现扫码页面方便用户进行扫码支付，问题就来了，web端页面在移动设备上（只要是Android系统的自动都识别成移动设备）于是就自动切换到登录页面了。

问题探究

怎么办呢，我们发现登录付款的左侧有一个扫一扫付款的按钮，于是我们先尝试利用div的点击事件去处理一下。
通过找到
<a class="switch-tip-btn" href="javascript:void(0)" seed="J_tip_pc-switchTipBtn" smartracker="on">扫一扫付款&nbsp;&gt;</a>
于是我们在浏览器控制台输入getElementsByClassName('switch-tip-btn')[0].click();发现果然实现了调整效果，颇费！这么简单就解决了么？no！android蛋疼的webview告诉你然并卵。

android代码部分

    @AfterViews
    void initViews() {
        WebSettings webSettings = wv_alipay.getSettings();
        // 设置WebView属性，能够执行Javascript脚本
        webSettings.setJavaScriptEnabled(true);
        webview.setWebViewClient(new MyWebViewClient());
        webview.setWebChromeClient(new WebChromeClient());
        webview.loadUrl(url);
    }

    private class MyWebViewClient extends WebViewClient {
       @Override
       public void onPageStarted(WebView view, String url, Bitmap favicon) {
           super.onPageStarted(view, url, favicon);
           showProgressDialog(getString(R.string.global_progress_loading));
       }

       @Override
       public void onPageFinished(WebView view, String url) {
           view.getSettings().setJavaScriptEnabled(true);
           super.onPageFinished(view, url);
           //点击按钮
           webview.loadUrl("javascript:document.getElementsByClassName('switch-tip-btn')
           [0].click()");
       }

       @Override
       public boolean shouldOverrideUrlLoading(WebView view, String url) {
           return false;
       }
    }

失败原因

为毛这么颇费的方法会失败呢，实际上我是在酷开电视端（Android4.3）执行了一次，又在模拟器（Android5.0）上执行了一次。并不是完全失败，电视上毫无反应，模拟器上却实现了。显而易见，与Android版本有关咯，于是我恶补了一下WebView各历史版本的底层内核，发现：

1. 4.4版本以下（不包含4.4）是webkit内核 ps:简直就是个坑呢
2. 4.4版本就换成chromium内核了
3. 5.0版本引入了当时最新的chromium37版本并且增加了安全性和稳定性
   这里不详细展开，可参考WebView各版本分析

尝试方法

我们先以网页实现为基础想办法，我们发现4.4以下版本只有javascrpt原生属性的click点击事件实现不了，那么我们可以从另一个角度思考问题：

1. 我们想象隐藏账户页可不可以实现呢，于是乎我们找到付款登录里div的id把付款登录页隐藏，在控制台中执行document.getElementById('J_view_pc').style.display='none'于是就变成路第二个图那个样子,what happen! 即使把扫码页block一下也于事无补，所以我们一定要把页面进行替换或者切换才可以
   
   

2. 那么我们尝试第二种思路，将页面进行替换。在控制台中执行javascript:document.getElementById('J_view_pc').innerHTML=document.getElementById('J_view_qr').innerHTML将登录页面替换成扫码页面，这个想法so good,but what fack. 二维码消失了！
   

   最终解决方案

   其实也很简单，既然替换不了那么就只能去进行切换，但我们又不知道切换的function。没关系，我们可以利用位移方法，将扫码页移动过来，于是乎就有了document.getElementById('J_view_qr').style.cssText = 'position: absolute;right: 100px;'如下图。两个页面现在重叠了怎么办呢？好办啊，把登录页隐藏了不就得。了。document.getElementById('J_view_pc').style.display='none 'ok，到此颇费解决问题。
   
   

ps:这次是一次跨领域解决问题，正好也巩固了一下前一段时间学习h5的基础（压根就没记住啥嘛）。实践证明思路是第一位的，有一个好的解决思路就有了明确的方向。over

附加android测试代码

    @Click(R.id.btn_ali)
    void onClick(View v) {
//        wv_alipay.loadUrl("javascript:document.getElementsByClassName('switch-tip-icon-wrapper')[0].style.display='none'");
//        wv_alipay.loadUrl("javascript:document.getElementsByClassName('switch-tip-icon-wrapper')[0].click()");
//        wv_alipay.loadUrl("javascript:document.getElementById('J_viewSwitcher').click()");
//        wv_alipay.loadUrl("javascript:$('.J_viewSwitcher').click()");
//        wv_alipay.loadUrl("javascript:document.getElementsByClassName('cashier-center-view view-qrcode fn-left')[0].style.display='block'");
//        wv_alipay.loadUrl("javascript:document.getElementById('J_view_pc').style.display='block'");
//          wv_alipay.loadUrl("javascript:document.getElementById('J_view_pc').innerHTML=document.getElementById('J_view_qr').innerHTML");
//        wv_alipay.loadUrl("javascript:setTimeout('alert(\"hdhdhd\")', 3000)");
//        wv_alipay.loadUrl("javascript:alert(\"hdhdhd\")");
        wv_alipay.loadUrl("javascript:document.getElementById('J_view_qr').style.cssText = 'position: absolute;right: 100px;';");
    }