在UIWebView / WKWebView中将CSS插入加载的HTML中

我成功地获取HTML内容并显示到我的UIWebView中。

但是想要通过添加外部CSS文件来自定义内容。 我只能改变文字和字体的大小。 我尝试了所有可能的解决方案来进行更改，但它不起作用 – 它没有显示任何变化。

以下是我的代码 

HTMLNode* body = [parser body]; HTMLNode* mainContentNode = [body findChildWithAttribute:@"id" matchingName:@"main_content" allowPartial:NO]; NSString *pageContent = [NSString stringWithFormat:@"%@%@", cssString, contentHtml]; [webView loadHTMLString:pageContent baseURL:[NSURL URLWithString:@"http://www.example.org"]]; -(void)webViewDidFinishLoad:(UIWebView *)webView1{ int fontSize = 50; NSString *font = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", fontSize]; NSString *fontString = [[NSString alloc] initWithFormat:@"document.getElementById('body').style.fontFamily=\"helvetica\""]; [webView1 stringByEvaluatingJavaScriptFromString:fontString]; [webView1 stringByEvaluatingJavaScriptFromString:font]; }

请帮助我在我的视图中获取css样式表。

你可以这样做： 

 - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *cssString = @"body { font-family: Helvetica; font-size: 50px }"; // 1 NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; // 2 NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString]; // 3 [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; // 4 }

这段代码的作用：

// 1：定义包含所有CSS声明的字符串

// 2：定义一个javascript字符串，用于创建新的

HTML DOM元素并将CSS声明插入其中。 实际上插入是在下一步完成的，现在只有%@占位符。 我这样做是为了防止线路变得太长，但是第2步和第3步可以一起完成。

// 3：组合2个字符串

// 4：在UIWebView中执行javascript

为此，您的HTML必须具有元素。

编辑：

您还可以从本地css文件（在本例中名为“styles.css”）加载css字符串。 只需使用以下内容替换步骤// 1： 

 NSString *path = [[NSBundle mainBundle] pathForResource:@"styles" ofType:@"css"]; NSString *cssString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

作为另一种选择，您只需将元素注入加载CSS文件的 ： 

 - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *path = [[NSBundle mainBundle] pathForResource:@"styles" ofType:@"css"]; NSString *javascriptString = @"var link = document.createElement('link'); link.href = '%@'; link.rel = 'stylesheet'; document.head.appendChild(link)"; NSString *javascriptWithPathString = [NSString stringWithFormat:javascriptString, path]; [webView stringByEvaluatingJavaScriptFromString:javascriptWithPathString]; }

此解决方案最适合大型CSS文件。 不幸的是，它不适用于远程HTML文件。 只有当您想要将CSS插入已下载到应用程序的HTML中时，才能使用此选项。

更新：WKWebView / Swift 3.x

当您使用WKWebView由于WKWebView的安全设置，注入元素不起作用。

您仍然可以将css作为字符串注入。 在代码中创建CSS字符串//1或将其放在本地文件中//2 。 请注意，使用WKWebView，您必须在WKNavigationDelegate的webView(_:didFinish:)方法中进行注入： 

 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { insertCSSString(into: webView) // 1 // OR insertContentsOfCSSFile(into: webView) // 2 } func insertCSSString(into webView: WKWebView) { let cssString = "body { font-size: 50px; color: #f00 }" let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);" webView.evaluateJavaScript(jsString, completionHandler: nil) } func insertContentsOfCSSFile(into webView: WKWebView) { guard let path = Bundle.main.path(forResource: "styles", ofType: "css") else { return } let cssString = try! String(contentsOfFile: path).trimmingCharacters(in: .whitespacesAndNewlines) let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);" webView.evaluateJavaScript(jsString, completionHandler: nil) }

有关更完整的详细信息，请参阅@ joern接受的答案。 我正在添加这个答案，因为我碰到了一个奇怪的边缘情况。 我的特定用例需要使用class="dialog"为div添加样式。 出于某种原因，使用.dialog和div的样式不起作用，虽然其他类型的样式工作。 最后，我使用以下内容来设置dialog的宽度 

 let width = Int(webView.bounds.width) let script = "document.getElementsByClassName(\"dialog\")[0].style.width = \"\(width)px\"" webView.evaluateJavaScript(script)
Interesting Posts