将 CSS 插入 UIWebView/WKWebView 中加载的 HTML-移动开发问题

Insert CSS into loaded HTML in UIWebView / WKWebView(将 CSS 插入 UIWebView/WKWebView 中加载的 HTML)

本文介绍了将 CSS 插入 UIWebView/WKWebView 中加载的 HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我能够成功获取 HTML 内容并显示到我的 UIWebView 中.

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

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

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.

下面是我的代码

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 样式表.

Please help me get the css stylesheet in my view.

推荐答案

你可以这样做:

- (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 声明的字符串

// 1 : Define a string that contains all the CSS declarations

//2 : 定义一个 javascript 字符串，该字符串创建一个新的 <style> HTML DOM 元素并将 CSS 声明插入其中.实际上插入是在下一步中完成的，现在只有 %@ 占位符.我这样做是为了防止线路变得太长，但第 2 步和第 3 步可以一起完成.

// 2 : Define a javascript string that creates a new <style> HTML DOM element and inserts the CSS declarations into it. Actually the inserting is done in the next step, right now there is only the %@ placeholder. I did this to prevent the line from becoming too long, but step 2 and 3 could be done together.

//3 : 合并两个字符串

// 3 : Combine the 2 strings

//4:在UIWebView中执行javascript

// 4 : Execute the javascript in the UIWebView

为此，您的 HTML 必须有一个 <head></head> 元素.

For this to work, your HTML has to have a <head></head> element.

您还可以从本地 css 文件(在本例中名为styles.css")加载 css 字符串.只需将步骤//1 替换为以下内容:

You can also load the css string from a local css file (named "styles.css" in this case). Just replace step //1 with the following:

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

作为另一种选择，您可以将 <link> 元素注入到加载 CSS 文件的 <head> 中:

As another option you can just inject a <link> element to the <head> that loads the CSS file:

- (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 中时，才能使用此功能.

This solution works best for large CSS files. Unfortunately it does not work with remote HTML files. You can only use this when you want to insert CSS into HTML that you have downloaded to your app.

更新:WKWebView/Swift 3.x

当您使用 WKWebView 时，由于 WKWebView 的安全设置，注入 <link> 元素不起作用.

When you are working with a WKWebView injecting a <link> element does not work because of WKWebView's security settings.

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

You can still inject the css as a string. Either create the CSS string in your code //1 or put it in a local file //2. Just be aware that with WKWebView you have to do the injection in WKNavigationDelegate's webView(_:didFinish:) method:

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)
}

这篇关于将 CSS 插入 UIWebView/WKWebView 中加载的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！