在混合应用开发中，将html5内容嵌入到webview中加载是非常常见的需求，不同平台的webview组件提供了对应的加载方法，同时也有一些通用的嵌入技巧可以提升页面运行的稳定性。
Android平台webview加载html5的方法
Android系统提供了WebView组件用于展示网页内容，加载html5可以按照以下方式操作：
加载远程html5链接
首先需要在布局文件中添加WebView组件，然后在Activity中获取实例并配置相关设置：
// 获取WebView实例
WebView webView = findViewById(R.id.web_view);
// 配置WebView设置
WebSettings settings = webView.getSettings();
// 启用JavaScript支持，html5很多功能依赖JS
settings.setJavaScriptEnabled(true);
// 设置自适应屏幕
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
// 加载远程html5链接
webView.loadUrl("https://ipipp.com/test.html");
加载本地html5文件
如果需要加载存放在本地assets目录下的html5文件，可以使用如下方式：
WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
// 加载assets目录下的html5文件
webView.loadUrl("file:///android_asset/local_page.html");
iOS平台webview加载html5的方法
iOS中常用WKWebView来加载html5内容，它是苹果推荐的现代webview组件，性能和稳定性都优于旧的UIWebView。
加载远程html5链接
import WebKit
// 创建WKWebView实例
let webView = WKWebView(frame: self.view.frame)
self.view.addSubview(webView)
// 加载远程html5链接
if let url = URL(string: "https://ipipp.com/test.html") {
let request = URLRequest(url: url)
webView.load(request)
}
加载本地html5文件
import WebKit
let webView = WKWebView(frame: self.view.frame)
self.view.addSubview(webView)
// 获取本地html5文件路径
if let path = Bundle.main.path(forResource: "local_page", ofType: "html") {
let url = URL(fileURLWithPath: path)
webView.loadFileURL(url, allowingReadAccessTo: url)
}
html5嵌入webview的实用技巧
处理html5与原生交互
很多时候需要html5页面调用原生方法，或者原生向html5传递数据，Android可以通过addJavascriptInterface实现：
// 定义供JS调用的原生接口类
public class JsInterface {
@JavascriptInterface
public String getNativeData() {
return "来自原生的数据";
}
}
// 将接口注入到webview中
webView.addJavascriptInterface(new JsInterface(), "nativeBridge");
html5页面中可以通过如下方式调用：
<script>
// 调用原生注入的方法
function callNative() {
var data = window.nativeBridge.getNativeData();
console.log(data);
}
</script>
优化html5加载性能
- 开启webview缓存，减少重复加载的资源请求
- 压缩html5中的静态资源，比如图片、css、js文件
- 预加载常用的html5页面，提升首次打开速度
适配不同屏幕尺寸
在html5的head标签中添加视口设置，确保页面在不同设备上正常显示：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
处理页面跳转和错误
可以设置WebViewClient监听页面加载过程，处理跳转和错误情况：
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 处理页面内跳转，避免打开外部浏览器
view.loadUrl(url);
return true;
}
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
// 加载失败时显示自定义错误页面
view.loadUrl("file:///android_asset/error.html");
}
});