Override a remote HTML with a local Javascript file in UiWebView?

Question

We are in the works of building a mobile app. While we are not objective c programers we are web-developers and have an idea to build a native like app but using HTML/CSS.

We plan to load an external blank HTML file (served from Drupal) from our server through the UIWebView and would like the CSS and Javascript to be loaded from the local device. i.e. website sends bare-bone non-styled HTML and the app loads the local CSS and JS to style it.

Update #3 - Resolution Found but minor errors exist:

We first did a normal NSURL call for the remote URL. And set the webview delegate as self in - (void)viewDidLoad.

NSURL *url = [NSURL URLWithString:@"localhost:8888/ios/"];
NSURLRequest *requestURL = [NSURLRequest requestWithURL:url];
mainView.delegate = self;
[mainView loadRequest:requestURL];

Then in - (void)webViewDidFinishLoad:(UIWebView *)webView we created a new NSSstring that called a JS DOM to inject a .jS file into the header.

NSString * JScode =
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.src = 'file';"
"document.getElementsByTagName('head')[0].appendChild(script);"
;

Since we plan to host the Javascript and CSS locally on the app we decided to call one .jS file that would load both css and JS components.

In order for us to call the actual .js file, we had to perform a string replacement to the actual file path:

JScode = [JScode stringByReplacingOccurrencesOfString:@"file" withString: [[NSBundle mainBundle] pathForResource:@"script" ofType:@"js" inDirectory:@"www"]];

Then at the end we ran a stringByEvaluatingJavaScriptFromString:JScode and it loaded the .js file!

Before:

After

Remaning Issue: For whatever reason while the code shows the file is loaded but has an odd URL that when we click on gives us a file not found error. Outside of the simulator the JS code properly executes.

Help?

Answer 1

I see at least 2 options:

• you could try to use file: URLs. The problem there is that they need to be absolute, and the install path is variable, so you'll probably have to send that to the server so he can return HTML containing the right URLs.

• You could manually load the HTML, then modify it to add the links to the local resources, and display it with loadHTMLString:baseURL: But then, you need to intercept all further load requests (subsequent to link clicks etc.) in webView:shouldStartLoadWithRequest:navigationType:. That method should then do the same thing (load the HTML, modify it, display it).

Edit: part of the code for the second option:

- (void)loadView
{
    [super loadView];
    self.view = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"url-from-server"]];

    receivedData = [NSMutableData dataWithCapacity: 0];

    // create the connection with the request
    // and start loading the data
    connection=[[NSURLConnection alloc] initWithRequest:request delegate:self];
    if (!connection) {
        // Release the receivedData object.
        receivedData = nil;

        // Inform the user that the connection failed.
    }
}

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
{
    // This method is called when the server has determined that it
    // has enough information to create the NSURLResponse object.

    // It can be called multiple times, for example in the case of a
    // redirect, so each time we reset the data.

    // receivedData is an instance variable declared elsewhere.
    [receivedData setLength:0];
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
    // Append the new data to receivedData.
    // receivedData is an instance variable declared elsewhere.
    [receivedData appendData:data];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)conn
{
    // do something with the data
    // receivedData is declared as a property elsewhere
    NSLog(@"Succeeded! Received %d bytes of data",[receivedData length]);

    NSString *string = [[[NSString alloc] initWithData:receivedData encoding:NSUTF8StringEncoding] stringByReplacingOccurrencesOfString:@"REPLACEME" withString:[[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"test" ofType:@"css"]] absoluteString]];

    [((UIWebView *)self.view) loadHTMLString:string baseURL:[NSURL URLWithString:@""]];

    // Release the connection and the data object
    // by setting the properties (declared elsewhere)
    // to nil.  Note that a real-world app usually
    // requires the delegate to manage more than one
    // connection at a time, so these lines would
    // typically be replaced by code to iterate through
    // whatever data structures you are using.
    connection = nil;
    receivedData = nil;
}

The HTML file looks like this:

<html>
        <head>
                <link rel="stylesheet" href="REPLACEME" type="text/css">
        </head>
        <body>
                whatever
        </body>
</html>

And the CSS is called test.css.