iOS实现 webView loadHTMLString加载外部css、js样式

最新推荐文章于 2021-07-01 13:55:44 发布

weixin_33809981

最新推荐文章于 2021-07-01 13:55:44 发布

阅读量1.8k

点赞数

文章标签：移动开发 swift

本文介绍如何使用WebView加载包含外部样式表和脚本的HTML内容。通过设置正确的baseURL，可以确保WebView正确解析相对路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下。

webview（或wk）用 loadHTMLString加载内容时，如果只是单纯的html内容，样式等都写在内部，直接设置baseURL为nil即可。

不过当html里包含外部样式或调用外部js文件时，就需要通过baseurl设置一下路径。

[_webView loadHTMLString:html baseURL:myUrl];

举个最简单例子：

<html>

<head>
    <link rel="stylesheet" href="testwai.css">
</head>

<body>
    123
    i'm content!
</body>

</html>

这里的html内部，有一个外部css引用，假设这个css文件在项目里

我们可以实现：

-(void) loadBundle{
    NSMutableString *html = [NSMutableString string];
    [html appendString:@"<html><head>"];
    [html appendFormat:@"<link rel=\"stylesheet\" href=\"testwai.css\"></head>"];
    [html appendString:@"<body><p>qfdkjeakofjadfdsjf</p></body></html>"];
    
    NSURL *myUrl = [NSURL fileURLWithPath:[NSBundle mainBundle].bundlePath];
    [_webView loadHTMLString:html baseURL:myUrl];
    
}

这里，重点在于这个baseURL参数，由于在项目里，所以路径用 [NSBundle mainBundle].bundlePath 获取即可。

同理如果是沙盒路径：

-(void) loadLocal{
    NSMutableString *html = [NSMutableString string];
    [html appendString:@"<html><head>"];
    [html appendFormat:@"<link rel=\"stylesheet\" href=\"testwai.css\"></head>"];
    [html appendString:@"<body><p>qfdkjeakofjadfdsjf</p></body></html>"];
    
    NSString *cssUrl = [NSString stringWithFormat:@"%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)];
    NSURL *myUrl = [NSURL fileURLWithPath:cssUrl];
    [_webView loadHTMLString:html baseURL:myUrl];
    
}