UIWebView and local css file

Question

I want to style a web page meant for the desktop so that it is presentable on a UIWebView on iPhone. I do not have access to the web server from which the pages originate. I would like to do this by changing the href attribute of the <link> stylesheet element programmatically.

I do the following with my IBOutlet UIWebView *webView.

NSString *cssPath = [[NSBundle mainBundle] pathForResource:@"MyStyleSheet" 
                                                    ofType:@"css"];
NSString *js = @"document.getElementsByTagName('link').setAttribute('href','";
NSString *js2 = [js stringByAppendingString:cssPath];
NSString *finalJS = [js2 stringByAppendingString:@"');"];

//check element structure
NSString *res = [webView stringByEvaluatingJavaScriptFromString:finalJS];

This does not work. Using the [webView stringByEvaluatingJavaScriptFromString:] message and making a change to the backgroundColor of the body does indeed work - done as an exercise to see if I was using the call correctly.

Am I barking up the wrong tree?

user275790 · Accepted Answer · 2010-02-18 04:59:31Z

26

You can load CSS from local project directory

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:htmlString baseURL:baseURL];

detail info check this site : http://iphoneincubator.com/blog/windows-views/uiwebview-revisited

answered Feb 18, 2010 at 4:59

user275790

2912 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jens Over a year ago

The css file is loaded by a declaration in the html header - like this: <link href="default.css" rel="stylesheet" type="text/css" /> Then you need to set the baseURL to the directory where the default.css file can be found.

Andrew · Accepted Answer · 2010-01-19 21:04:22Z

5

Unfortunately UIWebView doesn't provide an API for intercepting and modifying the requests that it makes while loading a resource. This means that any approach you try will be hack-ish to a certain extent.

The first approach I would try is:

Provide your own UIWebViewDelegate delegate on the view.
Implement -webView:shouldStartLoadWithRequest:navigationType: and return NO when you spot the CSS requests being made.
Once the view has finished loading the main resource, use -stringByEvaluatingJavaScriptFromString: to inject JavaScript into the page that dynamically loads/sets the stylesheet that you want to use.

In the JavaScript I would create an entirely new <link> element/node on the document instead of trying to modify the existing one.

answered Jan 19, 2010 at 21:04

Andrew

1,35712 silver badges11 bronze badges

1 Comment

Wei Liu Over a year ago

I don't think that -webView:shouldStartLoadWithRequest:navigationType: will be called when loading a css resource.

user469350 · Accepted Answer · 2010-12-22 19:10:10Z

2

Your code should work, if you choose index 0 of the found elements:

    NSString *js = @"document.getElementsByTagName('link')[0].setAttribute('href','";
    NSString *js2 = [js stringByAppendingString:cssPath];
    NSString *finalJS = [js2 stringByAppendingString:@"');"];
    [webview stringByEvaluatingJavaScriptFromString:finalJS];

You missed [0]

answered Dec 22, 2010 at 19:10

user469350

1511 gold badge2 silver badges5 bronze badges

Comments

Jens · Accepted Answer · 2017-01-03 13:36:05Z

2

SWIFT 3

If you (like me) only use a html snippet (not a complete web page) you need to add your local css file in the header of the html snippet.

I therefore define a html header like this:

let htmlHeader = "<html> \n <head> \n <link href=\"default.css\" rel=\"stylesheet\" type=\"text/css\" /> \n </head> \n <body> \n"

and a footer like this:

let htmlFooter = "</body> \n </html>"

Then find the baseURL for the css like this:

let baseURLForCss = Bundle.main.url(forResource: "default", withExtension: "css")

And load the html snippet with your own css like this:

webView.loadHTMLString(String.init(format: "%@%@&@", htmlHeader, htmlSnippet, htmlFooter), baseURL: baseURLForCss)

answered Jan 3, 2017 at 13:36

Jens

6,4031 gold badge53 silver badges85 bronze badges

Collectives™ on Stack Overflow

UIWebView and local css file

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related