javascript - 如何将网页不可用页面替换为自定义页面？ (网络浏览)

Question

我想从 Webpage not Available 或 ERR_NAME_NOT_RESOLVED 更改页面

我的页面“没有互联网连接”？

如果在线或再次连接互联网，则有一个刷新按钮可以返回在线，如果没有连接，则停留在页面无互联网连接。

看起来像一个页面 HTML 而不是默认的通知页面 android。

我正在使用 Android Studio 和 Kotlin

这是MyActivity

class MainActivity : AppCompatActivity() {
    internal var webView: WebView? = null
    private var mCM: String? = null
    private var mUM: ValueCallback<Uri>? = null
    private var mUMA: ValueCallback<Array<Uri?>>? = null

    //select whether you want to upload multiple files (set 'true' for yes)
    private val multiple_files = false

    @SuppressLint("SetJavaScriptEnabled", "WrongViewCast")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.ifView) as WebView
        assert(webView != null)
        val webSettings = webView!!.settings
        webSettings.javaScriptEnabled = true
        webSettings.allowFileAccess = true

        if (Build.VERSION.SDK_INT >= 21) {
            webSettings.mixedContentMode = 0
            webView!!.setLayerType(View.LAYER_TYPE_HARDWARE, null)
        }
        else {
            webView!!.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
        }
        webView!!.webViewClient = Callback()
        webView!!.loadUrl("http://xxx.xxx.xxx") //add your test web/page address here
        webView!!.setWebChromeClient(object : WebChromeClient()
}

这是我的代码回调

inner class Callback : WebViewClient() {
        override fun onReceivedError(view: WebView, errorCode: Int, description: String, failingUrl: String) {
            Toast.makeText(applicationContext, "Failed loading app!", Toast.LENGTH_SHORT).show()
            }
    }

当然，我的应用程序想要加载离线页面，其中 webview 离线以通知应用程序未连接互联网，并在 webview 时再次连接到互联网显示在线页面在线

Answer 1

将默认的 WebChromeClient 替换为您自定义的 CustomWebviewClient，如下所示

webView!!.setWebViewClient(object : CustomWebviewClient()

然后创建这个自定义的 WebViewClient

    inner class CustomWebviewClient : WebViewClient() {

    override fun onPageStarted(view: WebView, url: String, favicon: Bitmap) {
        super.onPageStarted(view, url, favicon)
    }

    override fun onPageFinished(view: WebView, url: String) {
        super.onPageFinished(view, url)
    }

    override fun onReceivedError(view: WebView, request: WebResourceRequest, error: WebResourceError) {
        super.onReceivedError(view, request, error)

        if (noInternetConnection()) {
            loadNoInternetErrorView()
        } else {
            loadErrorMessageView()
        }
    }
}

每当您的 WebView 无法加载页面时，它会调用 onReceivedError 回调，您可以在那里显示错误布局。对于错误 View ，您可以在具有初始可见性 View.GONE 的布局中创建错误布局，并在发生错误时使其可见。

XML 文件的更改

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

<LinearLayout
   android:id="@+id/error_screen"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

  <Textview 
    android:id="@+id/error_msg" />
  ................
  <ImageView
    android:id=:"@+id/error_icon/>
  //error view


</LinearLayout>

在loadErrorMessageView中你可以这样做

loadErrorMessageView() {
 webview.setVisibility(View.GONE);
 error_screen.setVisibility(View.VISIBLE);
 error_msg.setText("Some error Occurred");
}

类似地，对于没有互联网的情况，您可以显示“没有互联网消息”而不是“发生错误”，我希望这能消除您的疑虑