使用 JavaScript 的 UIWebView CSS 注入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6903292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 22:17:33  来源:igfitidea点击:

UIWebView CSS injection using JavaScript

javascriptiphonecssiosuiwebview

提问by Jim T

I'm trying to inject a local css file into an UIWebView that finished loading website such as google etc.

我正在尝试将本地 css 文件注入到完成加载网站(例如 google 等)的 UIWebView 中。

I'm trying with JavaScript but with no success.

我正在尝试使用 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];
}

Thanks,

谢谢,

采纳答案by rich

To inject javascript into a web view you must explicitly write in the html.

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

An example of this is here where I wrote in a javascript scrollTo function:

这方面的一个例子是我在 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();"];}

This code writes the entire script tags and the myFunction into the head of the HTML

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

回答by Jim T

I had a similar need. I have local html files in the bundle that I wanted to change css attributes programatically. Since you can not change files in the bundle, I wanted to inject my css at load time from variables in the app.

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

The code below demonstrates the technique, just substitute your method for getting the css, i.e. read from a file, plist, code, or db.

下面的代码演示了该技术,只需替换您获取 css 的方法,即从文件、plist、代码或数据库中读取。

- (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];
}

回答by Praveen-K

I would suggest you to create a js file and add to your project file.

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

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

NSData *fileData = [NSData dataWithContentsOfFile:filePath]; 

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

and you know how to call js in html file. this is the simplest and clean way to do it.

并且您知道如何在 html 文件中调用 js。这是最简单和干净的方法。