blocks|key|4461317|text|有关更完整的详细信息，请参阅@joern's+accepted答案。我添加这个答案是因为我遇到了一个奇怪的边缘情况。我的特定用例需要使用class="dialog"向div添加样式。由于某些原因，使用.dialog和div的样式不起作用，尽管其他类型的样式可以工作。最后，我使用以下代码来设置dialog的宽度|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4461318|let+width+=+Int(webView.bounds.width)
let+script+=+"document.getElementsByClassName(\"dialog\")[0].style.width+=+\"\(width)px\""
webView.evaluateJavaScript(script)|code-block|syntax|javascript|4461319|entityMap^0|1W|E|2B|3|2S|7|30|3|42|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|L|$]]

See @joern's accepted answer for more complete details. I'm adding this answer because I ran into a weird edge case. My particular use case needed to add styling to a <code>div</code> with a <code>class="dialog"</code>. For some reason styling using <code>.dialog</code> and <code>div</code> weren't working though other types of styling were working. In the end I used the following to set the width of the <code>dialog</code>

<pre><code>let width = Int(webView.bounds.width)
let script = "document.getElementsByClassName(\"dialog\")[0].style.width = \"\(width)px\""
webView.evaluateJavaScript(script)
</code></pre>

blocks|key|4461473|text|由于UIWebView在iOS+12中已被弃用，因此我将只回答WKWebView。我已经实现了CSS加载，就像在公认的答案中描述的那样。问题是，有时从没有CSS的HTML过渡到有CSS的HTML是可见的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4461474|我认为更好的方法是使用WKUserScript注入CSS，如下所示：|4461475|lazy+var+webView:+WKWebView+=+{
++++guard+let+path+=+Bundle.main.path(forResource:+"style",+ofType:+"css")+else+{
++++++++return+WKWebView()
++++}

++++let+cssString+=+try!+String(contentsOfFile:+path).components(separatedBy:+.newlines).joined()
++++let+source+=+"""
++++++var+style+=+document.createElement('style');
++++++style.innerHTML+=+'\(cssString)';
++++++document.head.appendChild(style);
++++"""

++++let+userScript+=+WKUserScript(source:+source,
++++++++++++++++++++++++++++++++++injectionTime:+.atDocumentEnd,
++++++++++++++++++++++++++++++++++forMainFrameOnly:+true)

++++let+userContentController+=+WKUserContentController()
++++userContentController.addUserScript(userScript)

++++let+configuration+=+WKWebViewConfiguration()
++++configuration.userContentController+=+userContentController

++++let+webView+=+WKWebView(frame:+.zero,
++++++++++++++++++++++++++++configuration:+configuration)
++++return+webView
}()|code-block|syntax|javascript|4461476|您可以在此blog+post中阅读有关此方法的更多信息。|4461477|entityMap|0|LINK|mutability|MUTABLE|url|https://www.amerhukic.com/determining-the-content-size-of-a-wkwebview^0|2|9|V|9|0|B|C|0|0|5|9|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Since <code>UIWebView</code> is deprecated in iOS 12, I'll only answer for <code>WKWebView</code>.
I've implemented CSS loading like it was described in the accepted answer. The problem was that sometimes the transition from HTML with no CSS applied to HTML with CSS was visible. 
I think a better approach is to use the <code>WKUserScript</code> to inject the CSS like this: 

<pre><code>lazy var webView: WKWebView = {
 guard let path = Bundle.main.path(forResource: "style", ofType: "css") else {
 return WKWebView()
 }

 let cssString = try! String(contentsOfFile: path).components(separatedBy: .newlines).joined()
 let source = """
 var style = document.createElement('style');
 style.innerHTML = '\(cssString)';
 document.head.appendChild(style);
 """

 let userScript = WKUserScript(source: source,
 injectionTime: .atDocumentEnd,
 forMainFrameOnly: true)

 let userContentController = WKUserContentController()
 userContentController.addUserScript(userScript)

 let configuration = WKWebViewConfiguration()
 configuration.userContentController = userContentController

 let webView = WKWebView(frame: .zero,
 configuration: configuration)
 return webView
}()
</code></pre>

You can read more about this approach in this <a href="https://www.amerhukic.com/determining-the-content-size-of-a-wkwebview" rel="noreferrer">blog post</a>.

blocks|key|4461531|text|与使用style标签应用css相比，最好使用link标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4461532|func+insertContentsOfCSSFile2(into+webView:+WKWebView)+{
++++guard+let+path+=+Bundle.main.path(forResource:+"resource",+ofType:+"css")+else+{+return+}++++++++++++++++
++++let+csFile+=+"var+head+=+document.getElementsByTagName('head')[0];var+link+=+document.createElement('link');+link.rel+=+'stylesheet';link.type+=+'text/css';link.href+=+'\(path)';link.media+=+'all';head.appendChild(link);"

++++webView.evaluateJavaScript(csFile)+{(result,+error)+in
++++++++if+let+error+=+error+{
++++++++++++print(error)
++++++++}
++++}
}|code-block|syntax|javascript|4461533|我已经测试过了。它工作得很好。|4461534|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Instead of applying css with style tag it's better to apply it with the link tag:

<pre><code>func insertContentsOfCSSFile2(into webView: WKWebView) {
 guard let path = Bundle.main.path(forResource: "resource", ofType: "css") else { return } 
 let csFile = "var head = document.getElementsByTagName('head')[0];var link = document.createElement('link'); link.rel = 'stylesheet';link.type = 'text/css';link.href = '\(path)';link.media = 'all';head.appendChild(link);"

 webView.evaluateJavaScript(csFile) {(result, error) in
 if let error = error {
 print(error)
 }
 }
}
</code></pre>

I have tested it. 
it is working fine.

blocks|key|4461424|text|您需要将此标题添加到HTML的apple+style之前|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4461425|let+fontName+=+UIFont.systemFont(ofSize:+17.0).fontName
++++let+htmlContent+=+"""
++++<header>
++++<meta+name='viewport'+content='width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+minimum-scale=1.0,+user-scalable=no'>
++++</header>
++++<style+type='text/css'>
++++img{max-height:+100%25;+min-height:+100%25;+height:auto;+max-width:+100%25;+width:auto;margin-bottom:5px;}
++++p{text-align:left%7Cright%7Ccenter;+line-height:+180%25;+font-family:+'\(fontName)';+font-size:+17px;}
++++iframe{width:100%25;+height:250px;}
++++</style>+\(html)
++++"""
++++webView.loadHTMLString(htmlContent,+baseURL:+Bundle.main.bundleURL)|code-block|syntax|javascript|4461426|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You need to add this header before apple style to HTML

<pre><code>let fontName = UIFont.systemFont(ofSize: 17.0).fontName
 let htmlContent = """
 &lt;header&gt;
 &lt;meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'&gt;
 &lt;/header&gt;
 &lt;style type='text/css'&gt;
 img{max-height: 100%; min-height: 100%; height:auto; max-width: 100%; width:auto;margin-bottom:5px;}
 p{text-align:left|right|center; line-height: 180%; font-family: '\(fontName)'; font-size: 17px;}
 iframe{width:100%; height:250px;}
 &lt;/style&gt; \(html)
 """
 webView.loadHTMLString(htmlContent, baseURL: Bundle.main.bundleURL)
</code></pre>

blocks|key|4461460|text|我试过Amer+Hukic答案。但它并不是这样工作的。我在html+head标签之间添加了下面的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4461461|<link+rel="stylesheet"+href="style.css">|code-block|syntax|javascript|4461462|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I tried Amer Hukic answer. But did not work just the way it is. I added below code between my html head tags.
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
</code></pre>

I am successfully able to get HTML content and display into my UIWebView. 

But want to customize the content by adding an external CSS file. I can only change the size of text and font. I tried every possible solution to make changes but it does not work - it shows no changes. 

Below is my code

<pre><code>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];
}
</code></pre>

Please help me get the css stylesheet in my view.

Insert CSS into loaded HTML in UIWebView / WKWebView

我能够成功地将HTML内容显示到我的UIWebView中。但希望通过添加外部CSS文件来自定义内容。我只能更改文本和字体的大小。我尝试了所有可能的解决方案来进行更改，但它不起作用-它没有显示任何更改。下面是我的代码HTMLNode* body = [parser body];HTMLNode* mainContentN...

问将CSS插入到UIWebView / WKWebView中加载的超文本标记语言中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将CSS插入到UIWebView / WKWebView中加载的超文本标记语言中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将CSS插入到UIWebView / WKWebView中加载的超文本标记语言中
EN