External CSS and JS in a UIWebView

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.

About these ads

One Response to External CSS and JS in a UIWebView

  1. J Border says:

    Thanks man! Was just about to give when I found your post. It works.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 525 other followers

%d bloggers like this: