WebView 加载HTML和CSS

个人开发项目中需要使用WebView加载一些网络上的内容,目前还没有深入的学习,这篇博客首先简单的记录一下WebView加载html和CSS的相关方法。

加载html无非有三种情况:一、存放在assets文件夹下的html文件;二、直接加载某个指定的网页。
三、从网络上解析得到的html代码,注意此处是代码,即字符串格式。

前两种情况比较类似:
首先获取WebView的控件:

mWebView = (WebView) findViewById(R.id.webview);

然后调用WebView的loadUrl方法:

mWebView.loadUrl("file:///android_asset/yourHtml.html");
mWebView.loadUrl("www.baidu.com");

第一行代码对应的是加载静态Html文件,无css样式。第二行是直接加载某个网址,直接加载该网页的CSS样式,代码很简单也很好理解。

对于第三种情况,由于所获取到的信息是html的代码,所以不能直接使用loadUrl()方法,此时要使用另外一种方法, 这里直接上源码:

/**
     * Loads the given data into this WebView using a 'data' scheme URL.
     * <p>
     * Note that JavaScript's same origin policy means that script running in a
     * page loaded using this method will be unable to access content loaded
     * using any scheme other than 'data', including 'http(s)'. To avoid this
     * restriction, use {@link
     * #loadDataWithBaseURL(String,String,String,String,String)
     * loadDataWithBaseURL()} with an appropriate base URL.
     * <p>
     * The encoding parameter specifies whether the data is base64 or URL
     * encoded
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 `WebView` 组件的 `initialData` 属性来加载自定义的 HTML 内容,并使用 `baseUrl` 属性来设置该 HTML 内容引用的 CSS 文件的基础路径。 以下是一个简单示例,展示如何在 `WebView` 加载一个包含 CSS 样式HTML 内容: ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class MyWebView extends StatelessWidget { @override Widget build(BuildContext context) { String htmlContent = """ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My WebView</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World!</h1> <p>This is a sample HTML content with CSS styles.</p> </body> </html> """; return Scaffold( appBar: AppBar( title: Text('My WebView'), ), body: WebView( initialData: WebViewData( data: htmlContent, mimeType: 'text/html', encoding: 'utf-8', ), baseUrl: 'assets/', ), ); } } ``` 在这个示例,我们定义了一个包含 CSS 样式HTML 内容,并将其传递给 `WebView` 组件的 `initialData` 属性。我们还设置了 `baseUrl` 属性为 `assets/`,这样 `WebView` 组件就可以正确地引用 `styles.css` 样式文件。 你需要将 `styles.css` 文件放在项目的 `assets` 目录下,这样才能被正确加载。同时,在 CSS 文件使用的所有其他资源,比如图片等,也需要放在 `assets` 目录下,并使用相对路径引用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值