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

开发者云辰技术 2022年11月15日

0 收藏 941 点赞 3,766 浏览 1446 个字

记录一下。

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

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

[_webView loadHTMLString:html baseURL:myUrl];

举个最简单例子：

<html><head>
    <link rel="stylesheet" href="testwai.css" rel="external nofollow" >
</head><body>    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];}

示例demo下载

测试项目里，点击下图这个即可。

<!–
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #00afca; background-color: #282b35}
–>
<!–
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #00afca; background-color: #282b35}
span.s1 {color: #93c96a}
span.s2 {color: #ffffff}
–>