将本地 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。现在，我在“ myFileHtml ”中有原始 HTML 文本。 我现在使用

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

我在寻找同一个问题的答案时遇到了这个问题。我正在将 Web 服务器中的 HTML 页面加载到 UIWebView 中。 HTML 已经有很多 CSS，适合 Web 浏览。就我而言，我想显示：none 一些不相关的 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

也许这应该可以解决问题？ （未在 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];
}

Answer 5

斯威夫特 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)
    }


}