I have following structure of my www folder in Documents directory in ios
Documents
--www
--index.html
--js
--script.js
--css
--style.css
My index.html file references script and style files as below:
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/script.js"></script>
Please note, the files and directory structure are created after app launch, from a remote-downloaded and extracted zip file. So this is not an issue caused by Xcode folder groups being confused with the app bundle's Documents subfolders.
It works fine when run in a browser but when loading index.html in UIWebview programmatically, script and style are not working. Meanwhile the index file itself loads perfectly.
When I give full path of script and css in index.html file it working fine for me.
Why relative path not working?
Thanks in advance.
Apparently the document base is not the same as the app's Documents directory when loading the HTML file programatically.
Check out the BASE element in HTML, it goes within the <head> element:
http://www.w3.org/wiki/HTML/Elements/base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>
To fix that, you'll have supply a Document base url manually. You haven't posted the code how you're programmatically loading the index.html file, so I will assume you're using the following UIWebView
method:
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
So now try out this code, see if it solves your problem:
// Get the app Documents path
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *basePath = ([paths count] > 0) ? [paths objectAtIndex:0] : nil;
// Add www/index.html to the basepath
NSString *fullFilepath = [basePath stringByAppendingPathComponent:@"www/index.html"];// This must be filled in with your code
// Load the file, assuming it exists
NSError *err;
NSString *html = [NSString stringWithContentsOfFile:fullFilepath encoding:NSUTF8StringEncoding error:&err];
// Load the html string into the web view with the base url
[self.webview loadHTMLString:html baseURL:[NSURL URLWithString:fullFilepath]];
If that doesn't work, try updating the code of the HTML file that you get from the .zip file. Something like:
// Get the app Documents path
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *basePath = ([paths count] > 0) ? [paths objectAtIndex:0] : nil;
// Add www/index.html to the basepath
NSError *err;
NSString *fullFilepath = [basePath stringByAppendingPathComponent:@"www/index.html"];
// Load the file, assuming it exists
NSString *html = [NSString stringWithContentsOfFile:fullFilepath encoding:NSUTF8StringEncoding error:&err];
// Check to ensure base element doesn't already exist
if ([html rangeOfString:@"<base"].location == NSNotFound) {
// HTML doesn't contain a base url tag
// Replace head with head and base tag
NSString *headreplacement = [NSString stringWithFormat:@"<head><base href=\"%@\">", fullFilepath];
html = [html stringByReplacingOccurrencesOfString:@"<head>" withString:headreplacement];
[html writeToFile:fullFilepath atomically:YES encoding:NSUTF8StringEncoding error:&err];
}
// Now the file has a base url tag
May be your JS And CSS File are not compiled by xcode. Open your project with xcode and GO to 'Targets' and check in the 'Compile Sources' section . If your js file is present in that folder, move it to the 'Copy Bundle Resource' and delete is from "Compile Sources" folders.
After that delete app from your device, then Go to the Build menu in xcode and clean all Targets and recompile.
Check to see if your HTML file including with your js file.
May be its your trouble for loading js.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With