I'm looking for a way to load my UIWebView with a local CSS file that should affect on the UIWebView's loadRequest.
For the clearness:
I have an UIWebView that I loadRequest it with a website url.
I also have a local CSS file that should affect this loadRequest url.
I want to load this CSS file onto the UIWebView.
Thanks,
This stackoverflow question appears to have one or two answers that may help you.
You need to load the local CSS (using a method not unlike #Shrey uses, but looking for your CSS file), and somehow inject it into the page, and the only way appears to be to use:
[webview stringByEvaluatingJavaScriptFromString:someJavascriptToInjectCSS];
and some clever Javascript to modify the page to add the CSS in.
Hope this helps point you in the right direction. I have used this method to inject stuff into pages, so it does work, but I don't know Javascript well enough to write the code to inject your CSS into the page.
This is the Swift version.
Load the css file on the webViewDidFinishLoad delegate method and use stringByEvaluatingJavaScriptFromString.
Credits here
func loadWebViewStyles() {
guard let cssPath = NSBundle.mainBundle().pathForResource("theme", ofType: "css") else {
return
}
let loadStyles = "var script = document.createElement('link'); script.type = 'text/css'; script.rel = 'stylesheet'; script.href = '\(cssPath)'; document.getElementsByTagName('body')[0].appendChild(script);"
webView.stringByEvaluatingJavaScriptFromString(loadStyles)
}
try this:
[WebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"]isDirectory:NO]]];
Related
Perhaps this is similar to this question, which has no responses: loadHTMLString Not Working With iOS5?
I have a UIWebView which I populate using loadHTMLString:baseURL:. The HTML is small and simple, and it references a css style sheet and a javascript script, which are loaded via the baseURL:, which is set to a directory inside the app's bundle.
// load the html
NSString* filePath = [NSString stringWithFormat: #"%#/html", [[NSBundle mainBundle] resourcePath ] ];
[_pCurrentWebView loadHTMLString: html baseURL: [NSURL fileURLWithPath: filePath isDirectory: YES ] ];
This has always worked in the past, but it is broke in iOS5. In iOS5, nothing is displayed in the UIWebView. The webview does source all of the expected events - e.g. shouldLoadRequest, didStartLoad, didFinishLoad, etc.
The html has a script tag, like this:
<script type="text/javascript" src="./myscript.js" />
If I remove the script tag then the page loads and renders fine in iOS5. And I can tell that the css file, which is referenced the same way as the script .js file, is loaded and applied.
If I keep the script tag but make the myscript.js file completely empty it still fails to load.
To me, this seems like some sort of cross-site-scripting issue - in that the WebView thinks that it should disallow loading the script (and in fact, disallow rendering of the page??)
Not sure where to go from here. Ideas?
UPDATE
This is feeling more and more like a cross-site-scripting issue. If I remove the tag it works, albeit sans script. All my images are loaded from the baseURL, as is my stylesheet. That is, we know the baseURL is working.
If I replace the tag with the actual contents of my script file then it works, so the problem is not the script itself.
Still looking for confirmation and additional ideas to circumvent. It's inconvenient for me to have to patch in the script itself into the html, but this is my best solution thus far. Alternatively I could write the html to the filesystem and load via loadRequest, but again, not my first choice.
UPDATE 2
Thanks to #djromero I have a solution. My document is a XHTML document and as such used a self-closing script tag (no content, just attributes.) But loadHTMLString:baseURL: apparently assumes a MIMEType of text/html, which the UIWebView apparently now interprets more strictly - and in text/html documents you may not have self closing tags.
My solution is to switch to loadData:MIMEtype:baseURL: and specify application/xhtml+xml as the mime type. I can easily construct the NSData from my NSString using dataUsingEncoding:.
I'm not an HTML standards expert, but...did you try to close the <script> tag:
<script type="text/javascript" src="./myscript.js"></script>
It worked for me.
The way to load an HTML file that contains embedded folder references, such as '/file.js', is to load it as a URL rather than as a STRING.
NSString *urlAddress = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"htm"];
NSURL *url = [NSURL fileURLWithPath:urlAddress];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];
I use this along with referenced folders (not referenced files) to create an ordinary website structure in Xcode, with js/ and css/ and images/ references in the embedded index.htm file, e.g.
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
UPDATE
I don't think that referencing a URI within a loaded HTML string was officially supported. If you must use a string, then load the needed resource files into the string before you load it into the UIWebView.
I'm developing an app that requires caching web pages (completely) along with their CSS files and images after saving the entire HTML of the page (going through the links to store each file along with the HTML file).
While viewing the HTML file offline, UIWebView takes a long time to load the page, given that I'm already offline, and the file is on disk along with its CSS and images.
I'm using this code to load the file:
NSData *htmlData = [NSData dataWithContentsOfFile:htmlFilePath];
[wView loadData:htmlData MIMEType:#"text/html" textEncodingName:#"UTF-8" baseURL:[NSURL fileURLWithPath:self.htmlFolderPath isDirectory:YES]];
Is there any other means of loading the file to the UIWebView that can load it faster?
P.S: it loads very fast on simulator (offline) but on device it takes a long time (considering its an already offline cached file)
Thanks for help.
Is your solution actually cache things other than the html file, meaning pictures, css, etc, AND relinking them in the html page? I am guessing that you are downloading and caching the html page and external resources then the UIWebView is loading that html and still going out to load the external resources. That would explain the fast performance on the simulator and the slower performance on device.
Here is a library designed to do exactly what you are trying to do: ASIWebPageRequest.
It should also be noted that it could simply be a case of disk i/o bottlenecking. I know on my project, I was loading large images in a uitableview and even after they were cached I noticed quite a bit of lag when pulling them off the disk because they were so big.
I've found certain kinds of CSS can grind WebView rendering to a halt. For example:
body { -webkit-box-shadow:inset 0 0 100px #222; }
This works great in the simulator, looks nice too. But on the phone (even the iPhone 4, iOS 4.2), a simple page will take 10sec to render.
Since this probably just takes time because it needs to parse and render the page, you may consider firing up the UIWebView in the background; i.e. added as a subview, but not visible.
Maybe the UIWebView is smart enough to know it doesn't need to do anything, but I suspect that at least html and css parsing is done right away.
If it doesn't do anything without being visible, reduce size to 1x1 and set opacity=0, and put that pixel some place where it can't interfere with touch event handling.
Not perfect but it may work.
I'm almost sure you will never be able to do this. The UIWebView just needs some time to process your webpage even when it's a local page.
Keeping that in mind you can try to preload the page before it's being shown. For example if you show it after a user presses a button, preload the page when you show the button instead of when the user actually presses the button. The user doesn't notice the slow loading, because it's being handled in the background so when the user presses the button the page is already been loaded.
I can give you an idea about alternative ways of loading HTML from file into the UIWebView. A small project I've got uses Objective-C as a pure wrapper for UIWebView
The project is here, but the main code is below: http://github.com/robb1e/iWeb
- (void)viewDidLoad {
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"test" ofType:#"html" inDirectory:#"."]];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[super viewDidLoad];
}
I'm also exploring ways of improving the perceived performance by showing an image while the DOM is getting ready. Some answers I've had are here:
Displaying a background image on UIWebView
Just if in case someone happens the same to me...
I had a UIWebView that was loading a string html and every resource (js and css) was stored locally.
I've faced that loading the content with internet connection it was some kind of slow (1 or 2 seconds to load and appear the webview in my controller) but when I tried to load the same page WITHOUT internet connection it was fast, really fast.
I've remembered that my HTML template had this in the start <base href="http://somesite.com" /> that I've used to load some images whit relative paths in some contents.
Removing that work as charm. So that can be making your web view load slower even if you don't have any reference to extern content in your HTML.
Even in my case, while loading local html files to webview was taking too much time.
Try to load local html files as below, it worked for me:
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:#"website_and_mobile_tnc-1" ofType:#"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
[_TandCView loadHTMLString:[headerString stringByAppendingString:htmlString] baseURL:nil];
If you want to load using NSData, try to make baseUrl to "nil" in your code.
I have modified your code as below,
NSData *htmlData = [NSData dataWithContentsOfFile:htmlFilePath];
[wView loadData:htmlData MIMEType:#"text/html" textEncodingName:#"UTF-8" baseURL:nil];
I didn't tried this, but please try and let me know.
There's a known problem with embedded UIWebViews that if you load data into them using loadHTMLString or loadData, the canGoBack/canGoForward properties and goBack/goForward methods don't work. These only work when using loadRequest.
Since Safari's normal app cache doesn't work in embedded UIWebViews, creating a native app that effectively caches otherwise live content becomes impossible/unusable. That is, I can cache the contents of the HTML, Javascript, images, etc. and load them via loadHTMLString or loadData, but then the back and forward buttons don't work.
I could also use loadRequest and specify a file URL, but that breaks when it comes to communicating with the live site -- even if I specify a tag (because of cookie domain issues).
I have a work around that involves basically re-implementing the app cache using local store (and not having the native app do any caching itself), which is OK, but not really ideal. Are there any other work arounds/something I missed?
I am using the UIWebView's canGoBack to check to see if I'm at the first page of the history. If I am then I just call the little method I used to load the first page (displayLocalResource sets up the HTMLString and loads it into the webView). Here is a snippet:
//Implementing a back button
- (void)backOne:(id)sender{
if ([webView canGoBack]) {
// There's a valid webpage to go back to, so go there
[webView goBack];
} else {
// You've reached the end of the line, so reload your own data
[self displayLocalResource];
}
}
So do you download the HTML yourself, then pass it to UIWebView as a string? Why so? Do you modify it on the fly or something?
Maybe a custom URL schema would help? You use loadRequest with a schema of your own, which in turn works with HTTP and then feeds the webview whatever data you want?
I had a same problem. I tried manage the history, but it is error prone. Now I have discovered a better solution of this.
What you want to do is simply add a loadRequest to about:blank and make that as a placeholder for you before you call loadHTMLString/loadData. Then you are totally free from monitoring the history. The webview.canGoBack and canGoForward will just work. Of course, you will need a hack to handle go back to the placeholder about:blank. You can do that in webViewDidFinishLoad. Here is the code highlight:
In the function when you call loadHTMLString:
[weakSelf.fbWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:#"about:blank"]]];
[weakSelf.fbWebView loadHTMLString:stringResponse baseURL:url];
Code to handle goBack:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
if ([webView.request.URL.absoluteString isEqualToString:#"about:blank"]
&& ![webView canGoBack] && [webView canGoForward]) {
[weakSelf.fbWebView loadHTMLString:stringResponse baseURL:url];
}
}
I think it is also possible expand this solution to handle those loadHTMLString that is not the first load. Just by having a Stack to record all the string response and insert an about:blank on each loadHTMLString. And pop the stack when each time go back to about:blank.
Could you fetch the content, save it to the local filesystem, point the webview to the local filesystem using file:// URLs, then intercept the link follows with shouldStartLoadWithRequest to fetch more to local fs, point webview at new local content, etc?
I've had good luck with UIWebView and file:/// URLs. Basically you'd be intercepting load requests, fetching stuff yourself, writing it to the local filesystem with rewritten URLs, then loading that into the browser.
There seems to be no way to load/save the browser history.
Loading the string into a temp file and using that as a URL request seems to cure this. It's something about loading the string directly that causes UIWebView not to see it as the home page you can navigate back to. This code worked for me:
//If you load the string like this, then "webView.canGoBack" never returns YES. It's documented frequently on the web.
//Loading the string as a URL instead seems to work better.
//[self.myWebView loadHTMLString:str baseURL:nil];
//write the string to a temp file
NSString *fileName = #"homepage.html";
NSURL *fileURL = [NSURL fileURLWithPath:[NSTemporaryDirectory() stringByAppendingPathComponent:fileName]];
NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];
[data writeToURL:fileURL atomically:NO];
//open that temp file in the UIWebView
[self.myWebView loadRequest:[NSURLRequest requestWithURL:fileURL]];
Use this to enable/disable the back button:
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//this is to check if we're back at the root page.
if (webView.canGoBack == YES) {
self.backButton.enabled=YES;
}
else {
self.backButton.enabled=NO;
}
}
I have a HTML Ajax website which consists only of one HTML file. How can I create an iPhone App out of it? The HTML file should be stored locally on the iPhone so it functions offline.
UIWebView *htmlView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0,0.0,320.0,380.0)];
[htmlView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"]isDirectory:NO]]];
[self.view addSubview:htmlView];
[htmlView release];
Depending on what level of AJAX you're using, the "CSS Ninja" has a nice tutorial on how to add the proper code your HTML file to make it accessible offline.
You can look at something like PhoneGap or iui.
You will probably want to do at least a tab bar with the webpage in one tab and an "about" or something in the other. Apple has been known to refuse apps that are just a straight up wrapper of a single page.
Finally I found two very good video tutorials which are explaining how to build an "UIWebView for iPhone App"
http://www.youtube.com/watch?v=_ZcND6ZVOYw
http://www.youtube.com/watch?v=EZKSbb40Jp8
I was using NYTimes iPhone application, I become bit curious when I notice that it cache UIwebview even though I didn't open that article.Does anyone have idea how to do that?
How NYTimes iPhone application doing offline reading?
Any help greatly appreciated.
Thanks,
Amit
I wrote the NYTimes app. Here are some details that you could have gotten by looking inside the app bundle.
I download the HTML for the articles, strip out whatever unsupported HTML and JS crud the producers stuffed in it and cache it in the backing store.
The article content is contained in a series of P tags (HTML fragment). I stuff that into a special HTML skeleton page that ships with the app. The static wrapper page also contains CSS and JS used to properly display the article and lazily load the images.
The image loading is really cool. The web view is notified when the images are ready. layout is not affected because I already know the sizes of the missing images.
You can use UIWebView to load html files stored locally on the iPhone.
NYTimes app is probably caching html and images in local storage.
Search google for "UIWebView local" and you get several useful hits.
I tried it out and it works great:
First, create a "view based application" and add a UIWebView to the NIB.
Second, add this code to your UIViewController code:
- (void)viewDidLoad
{
NSString *path = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"];
NSURL *url = [NSURL fileURLWithPath:path isDirectory:NO];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[super viewDidLoad];
}
Third, add a file called "index.html" to your "Resources" folder in xcode and it will be displayed.
UPDATE:
Indeed, the complicated part of this is downloading the images and stylesheets for the webpage. Doing this server side is easy with Simple HTML Parser (and PHP). Just package everything in a zip and download to your iPhone.
Alternatively, you could do it locally with a C/C++/OBJC HTML parser (libxml2.2 is available on iOS). See this SO question Parsing HTML on the iPhone.
It's going to a bit of a project, so good luck.