Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ios-css and js not working linked in html file when opening in UIWebview from Documents directory

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.

like image 602
Hiren gardhariya Avatar asked Nov 13 '13 07:11

Hiren gardhariya


2 Answers

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
like image 66
Tom Pace Avatar answered Oct 02 '22 09:10

Tom Pace


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.

like image 38
Divya Bhaloidiya Avatar answered Oct 02 '22 09:10

Divya Bhaloidiya