l***@163.com
l***@163.com
  • 发布:2020-04-03 11:31
  • 更新:2020-12-08 00:44
  • 阅读:2689

uniapp webview h5 输入框被挡

分类:uni-app

我在使用unapp的web-view组建加载h5的时候(android平台),遇到输入框被虚拟键盘挡住的情况。一番百度后没有找到解决方法,于是我写了一个android原生应用,用android自带的webview加载我的h5,发现一切正常,输入框没被挡住。于是我写了一个uniapp原生插件,专门用来加载我的h5。当一切准备就绪之后,问题解决了。本以为可以交付给客户了,后来又出现了一个令我不解的问题。这个问题是这样的,当h5里面操作完了以后需要通知uniapp做其他操作,于是我就使用android提供的addJavascriptInterface方法,给h5提供一个接口。奇怪的问题就要出现了,我在开放这个插件的时候,我使用的是androidstudio工具,在测试这个h5的时候,一切正常,h5能调用我提供的接口,uniapp内部也收到了通知。但是当我发布插件集成到uniapp里面之后,这个方法就失效了,这让我百思不得其解。我只能怀疑是uniapp的bug了。请问谁遇到过这个问题吗?下面我把我的代码贴出来

package top.swkjvr.simplebrowser;  

import android.annotation.SuppressLint;  
import android.annotation.TargetApi;  
import android.content.Context;  
import android.content.Intent;  
import android.os.Build;  
import android.os.Handler;  
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.util.Log;  
import android.view.View;  
import android.webkit.JavascriptInterface;  
import android.webkit.WebChromeClient;  
import android.webkit.WebResourceRequest;  
import android.webkit.WebSettings;  
import android.webkit.WebView;  
import android.webkit.WebViewClient;  
import android.widget.ProgressBar;  
import android.widget.Toast;  

public class SimpleBrowserActivity extends AppCompatActivity {  
    private static final String TAG = SimpleBrowserActivity.class.getName();  

    private WebView webView;  
    private ProgressBar progressBar;  
    private Handler handler = new Handler();  

    @SuppressLint("JavascriptInterface")  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_simple_browser);  

        progressBar = findViewById(R.id.progressBar);  
        progressBar.setVisibility(View.GONE);  

        webView = findViewById(R.id.webview);  
        webView.setWebViewClient(new WebViewClient(){  
            @Override  
            public boolean shouldOverrideUrlLoading(WebView view, String url) {  
                view.loadUrl(url);  
                return super.shouldOverrideUrlLoading(view, url);  
            }  

            @TargetApi(Build.VERSION_CODES.LOLLIPOP)  
            @Override  
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {  
                view.loadUrl(String.valueOf(request.getUrl()));  
                return super.shouldOverrideUrlLoading(view, request);  
            }  

        });  
        webView.setWebChromeClient(new WebChromeClient(){  
            @Override  
            public void onProgressChanged(WebView view, int newProgress) {  
                progressBar.setProgress(newProgress);  

                if (newProgress == 100) {  
                    handler.postDelayed(new Runnable() {  
                        @Override  
                        public void run() {  
                            progressBar.setVisibility(View.GONE);  
                        }  
                    }, 800);  
                } else {  
                    if (progressBar.getVisibility() == View.GONE) {  
                        progressBar.setVisibility(View.VISIBLE);  
                    }  
                }  
//                Log.d(TAG, "progress: " + newProgress);  
                super.onProgressChanged(view, newProgress);  
            }  
        });  
        WebSettings settings = webView.getSettings();  
        settings.setJavaScriptEnabled(true);  

        Intent intent = getIntent();  
        String url = intent.getStringExtra("url");  
        if (url == null) {  
            Toast.makeText(this, "url不能为空", Toast.LENGTH_LONG).show();  
            new Handler().postDelayed(new Runnable() {  
                @Override  
                public void run() {  
                    finish();  
                }  
            }, 1000);  
            return;  
        }  
        webView.loadUrl(url);  
        webView.addJavascriptInterface(new SimpleJavaScriptInterface(this), "AndroidInterface");  
    }  

    public static void loadUrl(String url, Context context) {  
        Intent intent = new Intent(context, SimpleBrowserActivity.class);  
        intent.putExtra("url", url);  
        context.startActivity(intent);  
    }  

    @Override  
    public void onBackPressed() {  
        if (webView.canGoBack()) {  
            webView.goBack();  
            return;  
        }  
        sendExit();  
        super.onBackPressed();  
    }  

    protected void onResume() {  
        super.onResume();  
        SimpleBrowserModule.registerRec(this);  
    }  

    protected void onPause() {  
        super.onPause();  
        SimpleBrowserModule.unregisterRec(this);  
    }  

    class SimpleJavaScriptInterface {  
        SimpleBrowserActivity activity;  

        public SimpleJavaScriptInterface(SimpleBrowserActivity activity) {  
            this.activity = activity;  
        }  

        @SuppressLint("JavascriptInterface")  
        @JavascriptInterface  
        void exit() {  
            Log.d(TAG, "js call exit");  
            activity.sendExit();  
            activity.finish();  
        }  
    }  

    private void sendExit() {  
        Intent intent = new Intent();  
        intent.setAction(CustomActionReceiver.ACTION_RECEIVER);  
        intent.putExtra(CustomActionReceiver.KEY_EXTRA_ACT, "exit");  
        sendBroadcast(intent);  
    }  
}  
//uniapp  
//#ifdef APP-PLUS  
    const simpleBrowserPlugin = uni.requireNativePlugin('SimpleBrowser');  
    //#endif  
if (uni.getSystemInfoSync().platform == "android") {  
                        console.log('call simpleBrowserPlugin')  
                        simpleBrowserPlugin.loadUrl({url: url}, ()=>{  
                            console.log('simpleBrowser exit')  
                            uni.switchTab({  
                                url:'../main/main'  
                            })  
                        })  
                    } else {  
                        uni.navigateTo({  
                            url: `../common/browser?url=${url}?UserID=${this.userInfo.account}`  
                        })  
                    }
2020-04-03 11:31 负责人:无 分享
已邀请:
q***@live.cn

q***@live.cn - 我就是我,看着都上火

我也遇到了同样的问题,webview h5 输入框被挡,大佬解决了么?

以何为家

以何为家 - 这个人很烂,暂无介绍

请问下,uniapp中加载的webview中的输入框被输入法覆盖是怎么解决的???

  • 2***@qq.com

    你好 想问下你解决了吗,我今天也遇到这个问题了

    2020-08-24 18:11

  • 以何为家

    回复 2***@qq.com: 没有,我是动态添加的一个原生webview规定好大小,加载一个本地的HTML文件,里面有个输入框在最底部,输入法弹出时,页面动都不动,不往上滚。暂时还没有思路解决

    2020-08-25 10:12

  • 2***@qq.com

    回复 以何为家: 我也是,我是在uni-app一个页面中使用webview内嵌的一个网页,和你的情况一样,输入框在最底部,输入法弹出时,底部不动,页面被输入法遮挡了,我现在也是没有解决思路~~··太难了,感觉无解啊,js又没有可以直接获取安卓键盘高度的接口~

    2020-08-25 16:09

  • 2***@qq.com

    可以加个微信嘛~方便交流18920584981

    2020-08-25 16:09

以何为家

以何为家 - 这个人很烂,暂无介绍

之前是view中不写布局,直接动态添加进去的webview,底部输入框会被覆盖。现在改成view布局中添加:

<web-view src="/hybrid/html/test.html"></web-view>

然后参考官网webview文档:

                              var currentWebview = this.$scope.$getAppWebview()  
                setTimeout(function() {  
                    wv = currentWebview.children()[0]  
                    wv.setStyle({  
                        top: 距离顶部距离  
                        height: webview高度,  
                    })  
                }, 10);

这样加载就可以将输入框顶上来了

2***@qq.com

2***@qq.com

同理啊

const307

const307 - 307

直接bottom:0 。。。整个页面顶上去虽然治标不治本

该问题目前已经被锁定, 无法添加新回复