Внедрение локального CSS в UIWebView

Question

Я пытаюсь «вставить» локальный файл CSS в загруженный файл xhtml.

Я нашел много примеров того, как это сделать, но у меня это просто не работает ...

Вот мой код:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *path = [[NSBundle mainBundle] bundlePath];
    NSString *cssPath = [path stringByAppendingPathComponent:@"test.css"]; 

    NSString *js = [NSString stringWithFormat:@"var cssNode = document.createElement('link');"
                "cssNode.type = 'text/css';"
                "cssNode.rel = 'stylesheet';"
                "cssNode.href = '%@';", cssPath];
    js = [NSString stringWithFormat:@"%@document.getElementsByTagName('head')[0].appendChild(cssNode);", js];
    //m_webview is a member 
    [m_webView stringByEvaluatingJavaScriptFromString:js];
}

Что я здесь не так делаю?

Спасибо

Answer 1

У меня тоже были проблемы с этим.

Я пытался загрузить файл HTML с сервера и изменить стиль с помощью локального файла CSS.

Сначала я использовал

[webView loadRequest:reqObj];

И когда он достиг - (void)webViewDidFinishLoad:(UIWebView *)webView, я пытался подтолкнуть CSS-файл, как ребенок, к «голове»:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *path = [[NSBundle mainBundle] bundlePath];
NSString *cssPath = [path stringByAppendingPathComponent:@"style.css"]; 

NSString *js = [NSString stringWithFormat:@"var cssChild = document.createElement('link');"
                "cssChild = 'text/css';"
                "cssChild = 'stylesheet';"
                "cssChild = '%@';", cssPath];
js = [NSString stringWithFormat:@"%@ document.getElementsByTagName('head')[0].appendChild(cssChild);", js];
[webView stringByEvaluatingJavaScriptFromString:js];
}

Так ... это не сработало ...

затем я попытался

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

(я скопировал строку HTML в htmlString), а затем внутри - (void)webViewDidFinishLoad:(UIWebView *)webView я ввел CSS, как в коде выше.И это сработало!

Но ... мой HTML-файл хранится на удаленном сервере, и у меня не было строки HTML, поэтому я использовал

NSString* myFile = [NSString stringWithFormat:@"http://blablabla.com/file.html"];
NSString* myFileURLString = [myFile stringByReplacingPercentEscapesUsingEncoding:NSASCIIStringEncoding];
NSData *myFileData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:myFileURLString]];
NSString* myFileHtml = [[[NSString alloc] initWithData:myFileData encoding:NSASCIIStringEncoding] autorelease];

, чтобы получить HTML.Теперь у меня есть необработанный HTML-текст внутри myFileHtml.Теперь я использую

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

и перехватываю ответ в 'webViewDidFinishLoad', вставляя в него мой CSS-файл, и он работает:)

Может быть, есть другое, более элегантное решение этой проблемы,но это то, что я придумал ...

Надеюсь, это помогло.

Answer 2

cssNode.href = '% @'; ", cssPath];

Строка выше завершается ошибкой, потому что она пытается извлечь файл с веб-сервера. Используя что-то вроде:

cssNode.href = 'file: //% @'; ", cssPath];

обращается к локальной файловой системе.Вы можете использовать режим разработчика Safari, чтобы проверить симулятор iPhone и посмотреть, найден ли файл и загружен ли он.

---

В итоге я реализовал встроенные таблицы стилей вместо ссылки на таблицу стилей.Вот код, который работает для меня

NSError *error;
NSString *css = [[NSString alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"stylesheet" ofType:@"css"] encoding:NSASCIIStringEncoding error:&error];
css = [css stringByReplacingOccurrencesOfString:@"\n" withString:@" "]; // js dom inject doesn't accept line breaks, so remove them

NSString *js = [NSString stringWithFormat:@"var styleNode = document.createElement('style');"
                "styleNode.type = 'text/css';"
                "styleNode.innerHTML = ' %@ ';", css];
js = [NSString stringWithFormat:@"%@document.getElementsByTagName('head')[0].appendChild(styleNode);", js];

[_webView stringByEvaluatingJavaScriptFromString:js];

Answer 3

Я столкнулся с этим, ища ответ на тот же вопрос. Я загружаю HTML-страницу с веб-сервера в UIWebView. HTML уже имеет много CSS, подходящего для просмотра в Интернете. В моем случае я хотел отобразить: ни одного не относящегося к делу div.

Я не хотел хранить HTML локально, а затем загружать его из файла, поэтому я предложил другое решение, концептуально подобное здесь, но больше на мой вкус. Это Swift 3. Запустите программу после загрузки страницы, но до ее отображения:

let css = "#someDiv {display:none;} #otherDiv {display:none;} .someClass {display:none;}"
let js = "var sheet = document.createElement('style');sheet.innerHTML = \"\(css)\";document.body.appendChild(sheet);"
webView.stringByEvaluatingJavaScript(from: js)

Answer 4

Swift 5:

Перед показом веб-сайта введите css в html

import UIKit
import WebKit

class WebViewController: UIViewController, WKNavigationDelegate {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        config()
    }

    private func config(){

        webView.navigationDelegate = self

        guard let url = URL(string: "url") else {
            return
        }

        webView.load(URLRequest(url: url))

    }

    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        let css = "Css Code"
        let js = "var style = document.createElement('style'); style.innerHTML = '\(css)'; document.head.appendChild(style);"
        webView.evaluateJavaScript(js, completionHandler: nil)
    }


}

Answer 5

может быть, это должно сработать?(Не проверено в Xcode):

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

  NSString *path = [[NSBundle mainBundle] bundlePath];
  NSString *cssPath = [path stringByAppendingPathComponent:@"test.css"]; 

  NSString *js = [NSString stringWithFormat:@"var cssNode = document.createElement('link');"
                  "cssNode.type = 'text/css';"
                  "cssNode.rel = 'stylesheet';"
                  "cssNode.href = '%@';", cssPath];
  js = [NSString stringWithFormat:@"%@document.getElementsByTagName('head')[0].appendChild(cssNode);", js];


  NSString *k = [NSString stringWithFormat:@"var script = %@; %@", cssPath, js];

   //m_webview is a member 
   [m_webView stringByEvaluatingJavaScriptFromString:k];
}