WebView加载html代码并附加css,js

在Android中，使用WebView加载HTML代码并附加CSS和JS可以通过以下步骤实现：

创建一个WebView对象。
使用WebView的loadDataWithBaseURL()方法加载HTML代码，并指定基础URL。
通过WebView的addJavascriptInterface()方法添加JavaScript接口，以便在JavaScript中调用Java代码。
使用WebView的setWebViewClient()方法设置一个WebViewClient，以便处理页面加载。
如果需要，可以通过WebView的setWebChromeClient()方法设置一个WebChromeClient，以便处理JavaScript对话框等。

以下是一个简单的示例代码：




import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
 
public class MyActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
 
        WebView webView = findViewById(R.id.webview);
 
        String htmlString = "<html><body><h1>Hello, WebView</h1></body></html>";
        String baseUrl = "http://mywebsite.com/"; // 基础URL，用于加载CSS和JS文件
 
        webView.loadDataWithBaseURL(baseUrl, htmlString, "text/html", "UTF-8", null);
 
        // 添加JavaScript接口
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
 
        // 处理JavaScript对话框
        webView.setWebChromeClient(new WebChromeClient() {
            // 实现需要的方法
        });
 
        // 处理页面加载
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                // 页面加载完成后，注入CSS和JS
                injectCSSandJS(view);
            }
        });
    }
 
    private void injectCSSandJS(WebView webView) {
        String css = "body { font-size: 16px; }"; // 示例CSS
        String js = "javascript:(function() { document.body.style.backgroundColor = 'red'; })();"; // 示例JS
 
        // 注入CSS
        webView.evaluateJavascript("(function() { " +
                "  var style = document.createElement('style'); " +
                "  style.innerHTML = '" + css + "'; " +
                "  document.head.appendChild(style); " +
                "})();", null);
 
        // 注入JS
        webView.evaluateJavascript(js, null);
    }
}
 
// 定义与JavaScript交互的类
class WebAppInterface {
    Context mContext;
 
    WebAppInterface(Context c) {
        mContext = c;
    }
 
    // 由JavaScript调用的方法
    @JavascriptInterfa

WebView加载html代码并附加css,js

评论已关闭

推荐阅读