HTML Link from within a local HTML file in a UIWebView

Question

Very new to XCode here

Basically, we have an app dependent on the UIWebView. When there is a valid network connection, we load a mobile web page into the UIWebView, if there is no connection, we will load a local version of the html web page. My scenario has to do with the offline or limited network connection scenario. When this offline scenario does occur, I am able to load my local html file just fine using the answer from this thread:

Load resources from relative path using local html in uiwebview

My problem comes in when click on a simple html link (which is also within my local app directory) within the local html file that is loaded. I have tried these, but when I click the link, nothing occurs, the link does not take me anywhere and the simulator will only allow me to copy the text:

<a href="file:///Sample.html">
<a href="file://Sample.html">
<a href="Sample.html">
<a href="/Sample.html">
<a href="Testing/Sample.html">

The sample.html webpage is in the same directory as the initial loaded html page. Not sure where I am going wrong, obviously missing something simple.

Actually the html in a `webpage` has its own directory structure at the server. So if you click a link in a webpage (online mode) it is referred to that link in the server directory. In offline mode, you have just downloaded the HTML content of the page but you don't have access to that server directory to actually hit the link. got it? — Abhishek Bedi, Jul 30 '14 at 18:13
I think I understand what you are saying. But I have pulled the server content and pages onto my local directory. Couldn't I then refer to my sample.html page since it is also in my local directory (in the app itself)? — stillsmallvoice, Jul 30 '14 at 18:21
Now That is the Actual Question Dude !. Try accessing the same in Safari browser in iOS simulator and share the result — Abhishek Bedi, Jul 30 '14 at 18:22
Can you please add some code to your question that shows maybe the section surrounding the link, and how you are setting the webview url. — Christopher Rathgeb, Aug 05 '14 at 20:06
Are you sure you copied the file and folder hierarchy to Xcode, most people mistake creating a group (Yellow Folder) which is just a link to a file to actually moving the the folder hierarchy (blue folder). Even if you copy, the html files individually in the yellow folder the links will actually not work because the folder hierarchy is not copied. — Paulo, Aug 06 '14 at 02:29
To make it clearer, groups (Yellow folders) are shortcuts useful for organising Xcode but it does not reflect the physical folders in the device, to do that you need Blue Folders. The links do not work because your code is actually pointing to a shortcut instead of the actual file - files in the same yellow folder may or mayn't be physically located in the same directory. — Paulo, Aug 06 '14 at 02:49

Christopher Rathgeb · Accepted Answer · 2014-08-13T15:24:55.230

I suggest you re-examine your directory hierarchy. The behavior you are describing is what happens when the link you are trying to navigate to does not exist on the local device. I ran the following small test:

Added a Webview to a view controller and loaded page1.html

UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 10, 320, 300)];
[self.view addSubview:webView];

NSURL *url = [[NSBundle mainBundle] URLForResource:@"page1" withExtension:@"html"];
NSString *html = [NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:nil];
NSURL *baseUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[webView loadHTMLString:html baseURL:baseUrl];

page1.html

<html>
<body>
    <h1>Page 1</h1>
    <a href="page2.html">Go to Page2</a>
</body>
</html>

page2.html

<html>
    <body>
        <h1>Page 2</h1>
        <a href="page1.html">Back to Page 1</a>
    </body>
</html>

Image of the project Structure

Image of the project structure

The end result is, that it works. Clicking takes you from page 1 to page 2 and back again all using local files. If we change the link to:

<a href="page3.html"></a>

which does not exist, you get the same behavior you are experiencing. That is you can only cut and copy and not actually go to the link.

enter image description here

Thank you for your example! It helped me a lot :) I was trying to have a base class that was controlling where the page would navigate in case of an internet connection (and in case of no internet connection), but I was having trouble finding a way to get it to recognize these local html pages, thanks again! — stillsmallvoice, Aug 13 '14 at 16:55
It seems that the method "loadHTMLString" does not seems to cooperate :) let urlString = Bundle.main.url(forResource: "Page1", withExtension: "html") webView.loadRequest(URLRequest(url:urlString!)) Although this seems to work. — Ravi Dalmia, Jul 20 '18 at 03:23

score 1 · Answer 2 · answered Aug 11 '14 at 12:27

For using resources from local file system try this solution like I did for displaying image on WebView.

-(NSString *)imagePath:(NSString *)fileName
{
    if ([fileName isEqualToString:@""] == NO) {
        NSLog(@"%@",fileName);
        NSString *ImagePath = [[NSBundle mainBundle] pathForResource:fileName ofType:@"png"];
        ImagePath = [ ImagePath stringByReplacingOccurrencesOfString:@"/" withString:@"//"];
        ImagePath = [ ImagePath stringByReplacingOccurrencesOfString:@" " withString:@"%20"];
        ImagePath = [@"file://" stringByAppendingString:ImagePath];
        return ImagePath;
    }

    else
    {
        return @"";
    }
}

Just assume you wnat to return the full path of your save HTML pages.

score 0 · Answer 3 · answered Jul 20 '18 at 03:24

@Chris has an excellent example laid out, may be we need to update as follows :

    let webView  = UIWebView(frame: self.view.frame)
    webView.delegate = self
    self.view.addSubview(webView)

    let  urlString = Bundle.main.url(forResource: "Page1", withExtension: "html")

    webView.loadRequest(URLRequest(url:urlString!))

HTML Link from within a local HTML file in a UIWebView

3 Answers3