UIWebView doesnot load pages properly in iPhone - iphone

I am new to iPhone,
I made ePub reader app, in which i am loading local .html page in my webview.
when i load my .html page it works properly but after some time it does not load properly. something unexpected things gets loads in my webview like html page's text color gets changes,backgorung color gets changes and images gets resizes and all several unexpected things occurs, when this things occurs at a same time when i click on button and on click when i call [webview reload] then everything again gets works fine.
Why this is occuring ?
I am creating webview in viewDidLoad
webView = [[UIWebView alloc] init];
webView.delegate = self;
[self addSubview:webView];
[webView release];
Any help will be appriciated.

Related

Preloading a UIWebView, avoiding white screen flash

I'm working on an app that has table navigation to eventually drill down to UIWebView that displays various information. However, the transition from the slickness of UITableView to the slow wonkiness of UIWebView is jarring for the user so I want to improve that experience however I can.
Specifically, the background of both the tableViews and UIWebView pages have black backgrounds, but when I open the UIWebView it flashes empty white for about a second (this is the case for both local and remote HTML files.) How can I (ideally) preload this process, or (at least) make the "flash" be all black rather than all white? I tried making the view / webView's background black but that didn't seem to help.
In my app right now, when a user selects a cell, the app just loads up the UIWebView subclass and pushes it on the navigation stack. The UIWebView subclass has an activity indicator that starts & stops animating on WebViewDidStartLoad and WebViewDidFinishLoad, which works fine, but it doesn't do anything to help the "white flash."
I have tested it... I'm sending the two method that I have used...
- (void)viewDidLoad {
[super viewDidLoad]; //objWebView is the outlet of UIWebView
[objWebView loadHTMLString:#"<html><body style=\"background-color:black;\"></body></html>" baseURL:nil];
//the more the delay the errors will be less so within 0.1-0.3 would be fine
[self performSelector:#selector(loadURL:) withObject:nil afterDelay:0.1];
}
-(void)loadURL:(id)sender{
[objWebView stopLoading]; //added this line to stop the previous request
NSURL *url = [NSURL URLWithString:#"http://www.google.com"];
NSURLRequest *req = [NSURLRequest requestWithURL:url];
[objWebView loadRequest:req];
}
here I'm performing the request after 0.1 sec, other wise it will look white as in your case. Or you can give your delay time depending upon the time.. Cheers :)
Try in your
-(void)viewDidLoad{
myWebView.hidden = YES;
Then in
-(void)loadURL:(id)sender{
myWebView.hidden = NO;
I used:
[webView setHidden:YES];
[webView setDelegate:self];
when creating my webView and making the request and then added this delegate method to handle completed requests:
- (void) webViewDidFinishLoad:(UIWebView*)webView{
[webView setHidden:NO];
}
Successfully done it.
You have to create a view in Interface Builder first.
Then load the html to the webview using a initWithFrame in the init of your ViewController that contains the webview(this is where the magic happens):
CGRect webFrame = [[UIScreen mainScreen] applicationFrame];
webView = [[UIWebView alloc] initWithFrame:webFrame];
Then simply load the webView into the view in viewWillAppear:
[viewWeb addSubview:webView];
This is really a question of interface designing, which is faster paint directly on the view or paint in a subview and then paint that subview in the view?
I had solved this problem years ago, using the common method of hiding the UIWebView behind a UIImageView, then removing the UIImageView after a delay.
But it suddenly came back, I think on iOS 7.0.4. It was occurring on a brand new iPad Air, as well as an older iPad mini non-retina. After two days of hair-pulling, I finally found a work-around.
Let's say you have webview which is restricted to landscape orientation, initialized like this:
WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 1024.0f, 768.0f)];
And then you make it visible after pre-loading, with eg bringSubviewToFront or setHidden:NO on the webview (or alternatively with setHidden:YES or removeFromSuperview on the UIImageView). But instead of seamlessly switching the views, there's a flash and the background color blinks for about half a second.
The fix is to change the size of your webview, ever so slightly:
WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 1024.01f, 768.0f)];
The problem and fix is highly reproducible. It works with a change as slight as the fourth decimal place (1024.0001f). At the fifth decimal place (1024.00001f), the flash returns. The value of the height (768.0f) didn't seem to matter.
Or, instead of working around the problem, you could just set the background color of your webview to whatever background color you're using. Unless you're using an image of course.

uiwebview youtube starting in landscape thumbnail does resize on rotation

I have navigation controller with a tableview. When you click on one of the cells it pushes on a view with a uiwebview on it. You are taken to a YouTube page.
When you are on the table view in portrait and click on a cell you see the youtube page in portrait. Changing your orientation the video thumbnail does not refresh. So the thumbnail is smaller. This is fine. I actually prefer it smaller. All the content that would consume 2 lines will then consume 1 line. So in other words everything else adjusts for the new dimensions.
The problem comes in when you start off in landscape. Since the thumbnail doesn't resize on orientation change, changing to portrait mode, the image now goes off the screen, while the rest of the content adjusts correctly.
[webVIew refresh];
does work but it obviously loads the entire page again. So depending on the connection there will be a flicker or possibly the site will go white until its finished loading (on slower connections).
I also tried load the website in an iframe. I asked a similar question yesterday, this was for local pages i was creating. The answer to that question was to put <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'> in the head. So I tried that with an iframe going and getting the page. That seemed like a dumb hack to begin with, but i was willing to go there. It wouldn't even load the page at all. I guess because the youtube page i'm loading redirects to yet other page. Upon further research it seemed like there were other issues with the iframe such as scrolling.
So my question is how can i:
A. Get just the thumbnail to resize/reload on orientation change
OR
B. Get the thumbnail to load in the dimensions it would load in portrait mode all the time, even if it was started in landscape.
You should override this method in your UIViewController class and do the resizing there:
(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration;
I found the answer, maybe someone could explain it or offer a better solution. There was also an addition bug that I had to work out.
I made sure the uiwebview had the delegate set to files owner.
I changed the parent view when it pushed the view onto the form from:
[self.navigationController pushViewController:controller animated:YES];
to (the important part being the 320, i'm restricting the view to portrait):
[self.navigationController pushViewController:controller animated:YES];
controller.webView.hidden = YES;
controller.webView.frame=CGRectMake(0, 0, 320,367);
3.On the webview i load the url as i always did:
NSURL *url = [NSURL URLWithString:sUrl];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];
4.In the webviewdidfinishload i now have:
if (self.interfaceOrientation ==
UIInterfaceOrientationLandscapeLeft ||
self.interfaceOrientation ==
UIInterfaceOrientationLandscapeRight) {
self.webView.frame=CGRectMake(0, 0, 480,227);
}
self.webView.hidden = NO;
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
All this would normally have solved my issue, but then i found out that the gdata url i'm getting from youtube service actually gets resolved to a 2nd url. Then i guess youtube changed their url format so it is forwarded to a 3rd url. This means that my didfinishload code was being called before the final url had loaded. To solve this i added:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if ([[[NSString stringWithFormat:#"%#",request.URL] substringWithRange:NSMakeRange(0, 26)] isEqualToString:#"http://m.youtube.com/watch"]) {
NSString *sUrl=[NSString stringWithFormat:#"%#",request.URL];
sUrl = [sUrl stringByReplacingOccurrencesOfString:#"http://m.youtube.com/watch?" withString:#"http://m.youtube.com/#/watch?"];
NSURL *url = [NSURL URLWithString:sUrl];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:requestObj];
return NO;
}
//NSLog(#"request:%#",request.URL);
return YES;
}
Which im sure could be better but basically i tell it to ignore the 2nd url, and make my own change to go to the 3rd url.

How can I prevent delayed display of my UIWebView

I must include some 'rich text' instructions* preceding a form; and thought adding a UIWebView to the header of the tableview would work. The HTML is a small file in my resources folder, the CSS is in a style tag in the file; so it's all nice and self contained.
The problem is, the view transitions in; then after a small delay the contents of the webview appear. The effect is jarring, and I don't think hiding the view and fading it in when it's ready would be any more desirable.
I'm creating the view with the code below, in my viewDidLoad method.
UIWebView * wv = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, HEADER_HEIGHT)];
[wv setBackgroundColor:[UIColor clearColor]];
[wv setOpaque:NO];
NSString *path = [[NSBundle mainBundle] pathForResource:#"HeaderMsg" ofType:#"html"];
assert(path != nil);
NSData *htmlData = [NSData dataWithContentsOfFile:path];
[wv loadData:htmlData MIMEType:#"text/html" textEncodingName:#"utf-8" baseURL:nil];
[self.tableView setTableHeaderView:wv];
[wv release];
I found 2 ugly workarounds, but I'm hoping someone has a better solution; since my workarounds make a real mess out of the code:
On previous screen when you make the
UIMYSCREENViewController, call a
[vc
preloadWebViewWithDelegate:self];
method which will make the webview
using the caller as the delegate.
The caller then retains the vc and
waits for the webview to sent it a
webviewDidFinishLoad method, at
which time it can present the view
and release the vc.
The calling view can make the webview,
wait for it to finish, then create the
new view and pass the webview into it.
At any rate, both of those "solutions" make me gag a little, so I'm hoping others have found a better way.
(*The instructions are mostly simple, styled text with some bullet points (no images or overly aggressive styling); but it takes about 14 carefully aligned UILabel views to simulate this without a webview - and is subject to the whims of the customer wanting to change the message.)
I would create another independent model or controller object to create and retain the webview, hopefully at a higher level and before (maybe during app init) displaying the view with the UI that could bring up the webview.
Consider this the same as pre-staging resources for an action game so that they don't have to be loaded during the game loop, which is a common design pattern.
Consider using this
https://github.com/Cocoanetics/DTCoreText/

How do you create and manage a UIWebView object entirely in code?

I'm adding a UIWebView to my iOS App and I'd like it to open in response to a button getting clicked (so this code is going to be written in one of the button's event handler).
How can I create this UIWebView dynamically in code, position it to cover the entire screen and respond to events (e.g. to UIWEbView's shouldStartLoadWithRequest function so that the UIWebView can ask the native code to close the UIWebView).
I'd specifically like to avoid having to create stuff in Interface-Builder and it would be great if this could be reduced to several lines of code that could be later copy-pasted into other projects easily.
Simple:
UIWebView *webView = [[[UIWebView alloc] initWithFrame:self.view.bounds] autorelease];
webView.delegate = self;
[self.view addSubview:webView];
You just need to implement the WebViewDelegate's method in the controller, that you are making the delegate of the UIWebView.

UIWebView delay in loading local content

I'm displayed a small amount of local content in a UIWebView, roughly 3 paragraphs of text and one 100x100px image. When the UIWebView is pushed onto to the nav controller, it takes about half a second before the content is displayed. This occurs on the device, not in the simulator. Obviously the UIWebView needs to do some work before displaying the content, but is there some way I can do this before the pushed view appears? I have not had any luck doing this myself.
Here is where I'm creating and pushing the view controller which contains the UIWebView:
ArticleViewController* viewController = [[ArticleViewController alloc] init];
viewController.article = article;
[viewController view]; //touch the view so it gets loaded
[viewController loadWebView]; //load the web view content
[self.navigationController pushViewController:viewController animated:YES];
[viewController release];
And here is the loadWebView method:
-(void)loadWebView {
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString* content = article.content;
NSString *html = [NSString stringWithFormat:#"\
<html><body style='background-color: transparent'><style type=""text/css"">body {font-family: helvetica; color: black; font-size: 10pt; margin: 10px 10px 10px 10px}</style>\
%#<div style='text-align:center'><a href='13443574_9709e4cf37.jpg?photographer=test' style='-webkit-tap-highlight-color:rgba(0,0,0,0);'><img src='13443574_9709e4cf37.jpg' height='160' width='230'></a></div></body></html>", content];
[self.webView loadHTMLString:html baseURL:baseURL];
}
Previously I had [viewController loadWebView] in the viewDidLoad method, but the result seems to be the same. A blank screen when the viewController is pushed, followed by the content loading half a second later.
Any ideas?
Problem Confirmed
I too see a half-second or more delay with a white screen before my UIWebView content appears. This happens only on the first use of a UIWebView during that run of the app. Successive appearances of UIWebView are nearly instantaneous. So it seems to me and other folk that the delay must be due to WebKit libraries needing to load and initialize.
Warm-up WebKit
You cannot eliminate the delay. But you can move that delay to the start of your app, to lessen the annoying effect of "blank screen" to your users. The trick is to load UIWebView with a bogus page off-screen, during your app's launch. Build a minimal HTML5 web page in a hard-coded string. I use a correct and valid HTML5 content to minimize the time taken by UIWebView/WebKit to analyze.
This technique works noticeably well on real hardware (iPhone 3GS), not just the iOS Simulator.
In my app delegates didFinishLaunchingWithOptions method, the bottom of the ARC-compliant code looks like this:
…
[self.window makeKeyAndVisible];
// Performance optimization: Warm up the UIWebView widget and its related WebKit libraries.
// We are choosing the trade-off between (A) a slight delay here during app launch to create and abandon a bogus UIWebView instance, and
// (B) a flash of white and noticeable delay as the UINavigationController slides in from the right the first UIWebView we display during the app run.
UIWebView* bogusWebView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
NSString* html = #"<!doctype html><html lang=en><head><meta charset=utf-8><title>blah</title></head><body><p>bogus content</p></body></html>";
[bogusWebView loadHTMLString:html baseURL:nil]; // Load the page.
bogusWebView = nil; // Not really needed, but self-documents that we intend to discard this object.
return YES;
This technique seems to reduce most but not quite all of the approximate half-second delay during the user's first appearance of UIWebView on screen. I conclude that most of the delay is due to WebKit warming up, but there must be some overhead related to graphically presenting a UIWebView on-screen. If so, we cannot eliminate that remaining overhead with off-screen work. But nevertheless, this technique eliminates most of the initial delay. So the user's first impression of my app won't be "slow".
You're going to make the user wait, the only question is: is it before or after the webview appears? If you're set on "before", then you should create the controller, load the web view, but wait to push it until the -webViewDidFinishLoad: delegate method fires. Once you receive that, you can push the view.