Search code examples
iphonehtmlcssuiwebview

How can I add an external stylesheet to a UIWebView in Xcode?

I have looked at various similar questions and answers and still cannot get this to work, so I'm adding my own question:

I'm playing with UIWebView. I can create a working html page with inline CSS. I cannot figure out how to get the CSS to load if it is in a file in the app resources group.

My code is:

NSString *path = [[NSBundle mainBundle] pathForResource:@"webViewPage2" ofType:@"html"];
    NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];

    NSString *htmlString = [[NSString alloc] initWithData: 
                              [readHandle readDataToEndOfFile] encoding:NSUTF8StringEncoding];


    webView.opaque = NO;
    webView.backgroundColor = [UIColor clearColor];
    [self.webView loadHTMLString:htmlString baseURL:nil];
    [htmlString release];

And my html call is this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/greek123.css" />
</head>

<body style="background-color: transparent;">

<h2>Some Title</h2>


<p>We can put instructions here. Such as: 
"uh-oh You should not have pushed that button!"
</p>


</body>

</html>

I would appreciate any ideas or solutions. Many thanks!

Solution

  • change the baseURL of the UIWebView to the url of your mainbundle.

    NSURL *mainBundleURL = [[NSBundle mainBundle] bundleURL];
[self.webView loadHTMLString:htmlString baseURL:mainBundleURL];

    Swift 3:

    webView.loadHTMLString(contentString, baseURL: Bundle.main.bundleURL)