Can't change background for UIWebView in iOS

Question

Is there a way to change background color for UIWebView?

None of the colors set in IB effect UIWebView behavior: before actual content is loaded it shows as up as white (causing a white flash between the moment it is loaded and content is rendered).

Setting background color programmatically does not do anything either.

Here is code:

@interface Web_ViewViewController : UIViewController {

    UIWebView *web;
}

@property (nonatomic, retain) IBOutlet UIWebView *web;
@end

....
-(void)viewDidLoad {
    super viewDidLoad;

    web.backgroundColor = [UIColor blueColor];
    NSURL *clUrl = [NSURL URLWithString:@"http://www.apple.com"];
    NSURLRequest *req = [NSURLRequest requestWithURL:clUrl];

    [web loadRequest:req];
}

score 180 · Answer 1 · edited Jan 10 '19 at 04:19

180

You can set the opaque property of the webview to NO and then set background color of the view beneath.

[webView setOpaque:NO];

edited Jan 10 '19 at 04:19

Cœur

37,241
25
195
267

answered Mar 12 '10 at 13:14

Kaveh

1,817
1
11
2

37

together with `webView.bakgroundColor = [UIColor clearColor]` – stigi Jul 14 '10 at 14:52
6

This really needs more votes. It's so much simpler than Adolfo's answer and works perfectly (with @stigi's suggestion, without it you get a gray flash rather than white which is already an improvement). – Rob Van Dam Dec 04 '10 at 18:56
This didn't work. The only simple solution seemed to be setting the web view to hidden at default, then unhide it in webViewDidFinishLoad. – Jonny Dec 06 '10 at 01:43
this does have SOME effect, but the gradient of the webview if you scroll to the bottom and beyond still remains – Tomen May 20 '11 at 15:12
2

Works perfectly. Setting the webView to opaque lets you see the background color of the webView. Setting it to clear like @stigi suggested will let you see whatever is behind the webView. – noodl_es May 25 '11 at 13:20
I'd like to note for anyone having troubles with this that setting the webview's opaque property to NO and its backgroundColor to clear works great if done in code but doesn't work if you try to do it using just InterfaceBuilder. – jj0b Jul 20 '11 at 16:37
for(UIView *wview in [[[self.webView subviews] objectAtIndex:0]subviews]) { if([wview isKindOfClass:[UIImageView class]]) { wview.hidden = YES; } } [self.webView setOpaque:NO]; [self.webView setBackgroundColor:[UIColor whiteColor]]; – mkto Oct 12 '11 at 06:33

Adolfo · Answer 2 · 2009-10-12T05:19:28.857

Give this a try. It will fade the UIWebView in once it has finished loading and you won't see the flash.

@interface Web_ViewViewController : UIViewController <UIWebViewDelegate> {

UIWebView *web;
BOOL firstLoad;
}

@property (nonatomic, retain) IBOutlet UIWebView *web;
@end

...

(void)viewDidLoad {
    [super viewDidLoad];
    firstLoad = YES;
    web.delegate = self;
    web.alpha = 0.0;
    NSURL *clUrl = [NSURL URLWithString:@"http://www.apple.com"];
    NSURLRequest *req = [NSURLRequest requestWithURL:clUrl];
    [web loadRequest:req];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
if (firstLoad) {
    firstLoad = NO;
    [UIView beginAnimations:@"web" context:nil];
    web.alpha = 1.0;
    [UIView commitAnimations];
    }
}

The animation block in webViewDidFinishLoad will fade the view in once it's loaded, or if you prefer to have it pop on then just remove the UIView calls.

score 7 · Answer 3 · answered May 10 '10 at 18:31

None of the answers here worked for me, they all involved still some sort of flash. I found a working answer here: http://www.iphonedevsdk.com/forum/iphone-sdk-development/4918-uiwebview-render-speeds-white-background.html (I had to adjust the delay to .25 to avoid the flashing). Remember to check the UIWebView's "hidden" flag in InterfaceBuilder.

- (void)webViewDidFinishLoad:(UIWebView *)webView 
{
    [self performSelector:@selector(showAboutWebView) withObject:nil afterDelay:.25];          
}

- (void)showAboutWebView 
{
    self.infoWebView.hidden = NO;
}

score 1 · Answer 4 · answered Oct 10 '09 at 05:46

Yes, it seems setting the backgroundColor property has no effect on the UIWebView.

I don't have a satisfactory solution, only a workaround that you can consider.

First change the background color, by setting an initial empty HTML page
Once that has loaded, you load your main URL (e.g. http://www.apple.com)

If you don't wait for the initial HTML page to load, you might not see the initial background while the main URL is loading. So you'll need to use the UIWebViewDelegate's webViewDidFinishLoad: method. You can implement that method in your Web_ViewViewController class, and make your Web_ViewViewController conform to the UIWebViewDelegate protocol. Initially, there is still a momentary flicker of white background until the empth HTML page loads. Not sure how to get rid of that. Below is a sample:

- (void)viewDidLoad
{
    [web loadHTMLString: @"<html><body bgcolor=\"#0000FF\"></body></html>" baseURL: nil];
    web.delegate = self;
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    static BOOL loadedMainURLAlready = NO;
    if (!loadedMainURLAlready)
    {
        NSURL *clUrl = [NSURL URLWithString:@"http://apple.com"];
        NSURLRequest *req = [NSURLRequest requestWithURL:clUrl];
        [webView loadRequest:req];
        loadedMainURLAlready = YES;
    }
}

yes, I am doing something similar to that already and I hate this white flicker, no matter how quick it is! I did find some solutions of making view transparent, I will play around with it. But I am not sure why UIWevView can't take background color! Thank you, for answering! — leon, Oct 10 '09 at 17:23

score 1 · Answer 5 · answered Jan 16 '11 at 09:42

1

I got a solution. Add the web view after it is loaded.

-(void)webViewDidFinishLoad: (UIWebView *)pageView {

    self.view =pageView;
    [pageView release];
}

answered Jan 16 '11 at 09:42

user377808

3,481
2
18
12

score 0 · Answer 6 · answered Aug 27 '13 at 18:00

0

In Xcode 4.6.3

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.viewWeb.hidden = YES;
    self.viewWeb.delegate = self;
// this allows the UIWebView box to your background color seamlessly.
    self.viewWeb.opaque = NO;

}

answered Aug 27 '13 at 18:00

Drew Harris

1
2

Matthew Ferguson · Answer 7 · 2016-02-04T09:02:28.183

0

This might help

(Xcode 5 iOS 7) Universal App example for iOS 7 and Xcode 5. It is an open source project / example located here: Link to SimpleWebView (Project Zip and Source Code Example)

webview.backgroundColor = [UIColor clearColor];

edited Feb 04 '16 at 09:02

answered Jan 21 '14 at 04:38

Matthew Ferguson

85
8

score 0 · Answer 8 · answered Apr 14 '10 at 07:12

Try this out. I have used a background image "address.png" from my application resources.

NSString *path=[[NSBundle mainBundle] pathForResource:@"address" ofType:@"png"];

NSURL *a=[[NSURL alloc] initFileURLWithPath:[path stringByDeletingLastPathComponent] isDirectory:YES];


NSLog(@"%@",[a description]);

NSDictionary *d=[parsedarray objectAtIndex:0];
// generate dynamic html as you want.
NSMutableString *str=[[NSMutableString alloc] init];
[str appendString:@"<html><body background=\"address.png\"><table><tr>"];
[str appendFormat:@"<td valign=\"top\" align=\"left\"><font size=\"2\"><b>Market Address</b><br>%@,<br>%@,<br>%@</font></td>",
             ([d valueForKey:@"address1"])?[d valueForKey:@"address1"]:@"",
             ([d valueForKey:@"address2"])?[d valueForKey:@"address2"]:@"",
             ([d valueForKey:@"address3"])?[d valueForKey:@"address3"]:@""
             ];

[str appendFormat:@"<td valign=\"top\" align=\"left\"><font size=\"2\"><b>Contact Number</b><br>%@<br><b><a href=\"%@\">Email Us</a><br><a href=\"%@\">Visit Website</a></b></font></td>",
[d valueForKey:@"phone"],[d valueForKey:@"email"],[d valueForKey:@"website"]];
[str appendString:@"</tr></table></body></html>"];


// set base url to your bundle path, so that it can get image named address.png 
[wvAddress loadHTMLString:str baseURL:a];

[str release]; str=nil;
[a release];

Can't change background for UIWebView in iOS

8 Answers8

Linked