Kotlin WebView调用Javascript：护眼模式（基础版）

最新推荐文章于 2023-04-10 12:09:05 发布

原创

最新推荐文章于 2023-04-10 12:09:05 发布 · 582 阅读

2 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#webview #kotlin #android #javascript #CSS

本文介绍了如何在Android应用中使用Kotlin和WebView结合JavaScript实现一个简单的护眼模式。通过在WebView中注入JavaScript脚本，改变网页元素的CSS样式，从而减轻长时间阅读对眼睛的疲劳。这种方法适用于CSS设置较为简单的网页，对于复杂的网页可能需要针对性的处理。

前言

有时心血来潮，通过Android webkit内核——android.webkit.WebView开发个浏览器在网上冲浪也是一个“快乐”的事。能力丰富点可以定制一个小说阅读器。当然，Geek极客的精神是可贵的。适当的时候做适当的事才是正确的路。平时在网上看新闻看小说，时间稍长很容易造成眼睛疲劳。特别是手机这类常用电子产品，对眼睛的刺激较多。新闻类站点基本没有护眼模式，而一些小说移动网站的“护眼”也不稳定。正所谓“靠山山倒，靠水水淹”、“求神不如求己”。还是利用编程技巧来捣鼓一个简单的“护眼模式”手机安卓浏览器。

实现

在Android上，开发者可以很轻易的使用Webkit内核（API30：android.webkit.WebView）。
activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#222222"
    tools:context=".MainActivity">
	<WebView
		android:id="@+id/web_view"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="#222222" />
</LinearLayout>

MainActivity.java:

class MainActivity : AppCompatActivity() {
   
   
	var webView: WebView?;

	override fun onCreate(savedInstanceState: Bundle?) {
   
   
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webView = findViewById<WebView>(R.id.web_view)
        initWebView(webView)
	}
}

WebView有好几种加载网页的方式：loadUrl、loadData和loadBaseDataWithUrl三个方法。

/*
 * Copyright (C) 2008 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://ww

最低0.47元/天解锁文章