When you’re displaying content in your iPhone app in a UIWebView, it’s helpful to be able to store your JavaScript and CSS in external js and css files. But the way to access these reliably has changed as iOS has matured, and there’s a lot of outdated misinformation about it online. Here’s what worked for me.
By the way, this assumes you’re programmatically creating the content shown in your UIWebView, so this solution wouldn’t work if you’re accessing external web sites. But if you’re doing that, they’ll probably be referencing external CSS and JS anyway. Also, my app doesn’t need to display images in the UIWebView, so I haven’t looked into a solution for displaying local images.
As of iOS 3.0, it appears that a UIWebView can no longer access local files directly. But you can get around this by reading in the contents of the files and then writing them into the HTML of the page you’re going to display. This means you can still store the CSS and JS in their own files, which is much better for readability.
Here’s the code snippet to pull it in: (you may need to copy-paste to see it all)
// load css styles
NSString *cssPath = [[NSBundle mainBundle] pathForResource:@"MyCSS"
ofType:@"css"];
NSData *cssData = [NSData dataWithContentsOfFile:cssPath];
NSString *cssString = [[NSString alloc] initWithData:cssData
encoding:NSASCIIStringEncoding];
// load js
NSString *jsPath = [[NSBundle mainBundle] pathForResource:@"MyJS"
ofType:@"js"];
NSData *jsData = [NSData dataWithContentsOfFile:jsPath];
NSString *jsString = [[NSString alloc] initWithData:jsData
encoding:NSASCIIStringEncoding];
// compose full html page
NSString *pageContent =
[NSString stringWithFormat:@"%@%@%@",
cssString, jsString, actualPageMarkup];
If you try this, the page should display with your CSS, but the JS won’t work. Why? Because, by default Xcode 3.2 thinks your JS files should be compiled, and it doesn’t know how to do it. Instead, what you want is for Xcode to just include the JS files in your bundle, just like it does with the CSS files. To do this, go under Targets in your left-hand “Groups & Files” sidebar, then under your app, then under “Compile Sources.” You should find all your JS files under there. Drag them under “Copy Bundle Resources” instead, rebuild, and the JS should run just fine.