CODEWITHSUNDEEP
ioscssobjective-cxcode
Vix Hunk
Vix Hunk

Reputation: 323

Load .CSS file from within app in uiwebview

i am trying to load .js and .css files from within app resources to uiwebview. and i am able to load .js file but can not load .css file please help. here is my code

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //NSString *cssFile = @"styling.css";

    NSString *jsFile = @"storage.js";
    NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:javascriptCode];
}

this code it working perfectly for .js file but how can i use .css file in it?

Upvotes: 4

Views: 2740

Answers (4)

wottle
wottle

Reputation: 13619

You are basically on the right track, but you should be able to add the css using the same stringByEvaluatingJavaScriptString method. 

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


    NSString *jsFile = @"storage.js";
    NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:javascriptCode];

    // Updated to load css from "styling.css" file. 
    NSString *cssFile = @"styling.css";
    NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *cssURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *cssString = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];

    // NSString *cssString = @"body { font-family: Verdana, Geneva, sans-serif; font-size: 50px; color: #F00; }";

    NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; 
    NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString];
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; 

}

Once you do this, you can verify that the style is applied by using Safari remote debugging to view the source for the page displayed on the device / simulator. It can show you if some existing CSS is overriding yours.

Upvotes: 2

chaunv
chaunv

Reputation: 843

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // Load file .js
    NSString *jsFile = @"storage.js";
    NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:javascriptCode];
    // Load file .css
    NSString *cssFile = @"styling.css";
    NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:cssFile ofType:nil];
    NSURL *cssURL = [NSURL fileURLWithPath:cssFilePath];
    NSString *cssCode = [NSString stringWithContentsOfFile:cssURL.path encoding:NSUTF8StringEncoding error:nil];
    NSString *jsAddCssString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)";
    NSString *jsWithCssString = [NSString stringWithFormat:jsAddCssString, cssCode];
    [webView stringByEvaluatingJavaScriptFromString:jsWithCssString];
}

You can try it.

Upvotes: 0

Mansi
Mansi

Reputation: 628

I have written on how to add .css file in Xcode and load any HTML String along with applying the local css, in a wkwebview

https://medium.com/if-let-swift-programming/css-in-your-xcode-project-2b7011a29cb3

Do check if any of this helps.

Creating a .css file

⏩ Open Text Edit (Ensure you have ‘Make Plain Text’ selected under Format, or you might keep wondering how to save with .css extension)

⏩ Scribble down your css code that you would want to apply on your web view’s HTML string (In my case I wanted 2 types of fonts, some custom properties on links and an image instead of a bullet item, so below is what my css file looks like)

@font-face
{
 font-family: 'Gotham-Book';
 src: local('Gotham-Book'),url('Gotham-Book.otf') format('opentype');
}
@font-face
{
 font-family: 'Gotham-Medium';
 src: local('Gotham-Medium'),url('Gotham-Medium.otf')    format('opentype');
}
a {
 color: #16A4FA;
 text-decoration: none;
}
li {
 margin: 0 0 0 -30px;
 padding: 10px 0 10px 40px;
 list-style: none;
 background-image: url('myImage.png');
 background-repeat: no-repeat;
 background-position: left top 8px;
 background-size: 30px;
}

Here, Note that if you want some images to be loaded in your web view you will have to add them as a resource file in your project (It won’t load from your Assets.xcassets)

Add .css in xcworkspace It’s as easy as adding some resource file

⏩ Add your file by dragging it to your desired location, and copy items if needed

⏩ Ensure your file is present in the Build Phases > Copy Bundle Resources list

Loading HTML string in your web view

import WebKit

extension WKWebView {

    func loadHTML(fromString: String, colorHEX: String = "#757575", fontFamily: String = "Gotham-Book", fontSize: String = "14") {
        let htmlString = """
        <link rel="stylesheet" type="text/css" href="myCSSFile.css">
        <span style="font-family: '\(fontFamily)'; font-weight: normal; font-size: \(fontSize); color: \(colorHEX)">\(fromString)</span>
        """
        self.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
    }
}

Calling

/// webView is a WKWebView.
webView.loadHTML(fromString: "yourHTMLStringGoesHere")

Upvotes: 0

Ganpat
Ganpat

Reputation: 863

NSString *HTML_HEADER=@"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=@"</BODY></HTML>";

NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:@"#FILE1#" withString:cssFilePath];

NSString *htmlString = [NSString stringWithFormat:@"%@%@%@",html_header_with_files,yourHtmlFile.html,HTML_FOOTER];

NSLog(@"htmlString %@", htmlString);
// Load HTML
[self.webView loadHTMLString:htmlString baseURL:nil];

Note: Add your all CSS/JS/HTML files to Project Properties >> Build Phases >> Copy Bundle Resources.

Upvotes: 2

Related Questions