使用 JavaScript 的 UIWebView CSS 注入

Posted 2023-03-14

【中文标题】使用 JavaScript 的 UIWebView CSS 注入

【英文标题】：UIWebView CSS injection using JavaScript

【发布时间】：2011-08-01 19:22:28

【问题描述】：

我正在尝试将本地 css 文件注入完成加载网站（如 google 等）的 UIWebView。

我正在尝试使用 javascript，但没有成功。

- (void)webViewDidFinishLoad:(UIWebView *)webView 
    NSString *cssPath = [[NSString alloc] initWithString:[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"styles.css"]];
    NSURL *baseURL = [NSURL fileURLWithPath:cssPath];

    NSString *js = [NSString stringWithFormat:@"var fileref = document.createElement('link');
                    fileref.setAttribute('rel', 'stylesheet');
                    fileref.setAttribute('type', 'text/css');
                    fileref.setAttribute('href', %@);", baseURL];

    [webView stringByEvaluatingJavaScriptFromString:js];

谢谢，

【参考方案1】：

我也有类似的需求。我想以编程方式更改 css 属性的包中有本地 html 文件。由于您无法更改捆绑包中的文件，因此我想在加载时从应用程序中的变量注入我的 css。

下面的代码演示了该技术，只需将您的方法替换为获取 css，即从文件、plist、代码或 db 中读取。

- (void)webViewDidFinishLoad:(UIWebView *)webView

    NSString* css = @"\"@font-face  font-family: 'Chalkboard'; src: local('ChalkboardSE-Regular');  body  background-color: #F0F0FC; color: #572B00; font-family: Chalkboard; a  color: #A00; text-decoration: none;\"";
    NSString* js = [NSString stringWithFormat:
                @"var styleNode = document.createElement('style');\n"
                 "styleNode.type = \"text/css\";\n"
                 "var styleText = document.createTextNode('%@');\n"
                 "styleNode.appendChild(styleText);\n"
                 "document.getElementsByTagName('head')[0].appendChild(styleNode);\n",css];
    NSLog(@"js:\n%@",js);
    [self.webView stringByEvaluatingJavaScriptFromString:js];

【讨论】：

FWIW 我不得不在注入的 CSS 中转义换行符以避免 Javascript EOF 错误。

【参考方案2】：

要将 javascript 注入 web 视图，您必须在 html 中明确写入。

我在 javascript scrollTo 函数中写了一个例子：

- (void)webViewDidFinishLoad:(UIWebView *)webView 
 [webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"  
 "script.type = 'text/javascript';"  
 "script.text = \"function myFunction()  "  
 "window.scrollTo(100,100)"
 "\";"  
 "document.getElementsByTagName('head')[0].appendChild(script);"];  

 [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];

此代码将整个脚本标签和 myFunction 写入 HTML 的头部

【讨论】：

谢谢，如果我想把它链接到 CSS 文件目录（baseURL）？

【参考方案3】：

我建议你创建一个 js 文件并添加到你的项目文件中。

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];

NSData *fileData = [NSData dataWithContentsOfFile:filePath]; 

NSString *jsString = [[NSString alloc] initWithData:fileData encoding:NSUTF8StringEncoding];

你知道如何在 html 文件中调用 js。这是最简单、最干净的方法。

【讨论】：

如果他使用 loadHTMLString 加载字符串，这可能会起作用。他只需要在字符串中包含 。