为什么通过JavaScript设置列宽和间隔后，UIWebView不会重新排列文本？

Question

我正在将一个html文件加载到UIWebView中，并通过webViewDidFinishLoad中的javascript设置"-webkit-column-width"和"-webkit-column-gap"样式属性，但文本没有重新排列成列。

- (void)viewDidLoad
{
    [super viewDidLoad];    
    NSURL *urlForView = [self.book.chapterURLs objectAtIndex:0];
    self.webView.delegate = self;
    self.webView.scrollView.bounces = NO;
    self.webView.scrollView.pagingEnabled = YES;
    [self.webView loadRequest:[NSURLRequest requestWithURL:urlForView]];
}

- (void) webViewDidFinishLoad:(UIWebView *)webView
{   
    NSString *jsString = @"document.getElementsByTagName('body')[0]. setAttribute('style','-webkit-column-width: 733px; -webkit-column-gap: 20px;');)";
    [self.webView stringByEvaluatingJavaScriptFromString:jsString];

我通过报警确认样式属性已经正确设置，但我不明白为什么它们没有起作用。在Safari中通过控制台执行同样的JavaScript字符串会产生预期的效果。有任何想法为什么在UIWebView中无法运行？

- Andrew Brown

---

你是在DOM和页面已经加载后设置它们。设置它们的行为是否应自动应用于已加载的页面？ - Gruntcakes

是的，我认为在页面加载后设置这些属性应该可以工作。更准确地说，我不知道为什么它不会工作，并且我已经确认它可以在Chrome和Safari上工作。 - Andrew Brown

Answer 1

我仍然不明白为什么上面的代码不起作用，但是我能够通过使用JavaScript获取文件的外部样式表，然后通过JavaScript编辑该CSS文件来找到解决方法。

NSString *varMySheet = @"var mySheet = document.styleSheets[0];";

NSString *addCSSRule =  @"function addCSSRule(selector, newRule) {"
"ruleIndex = mySheet.cssRules.length;"
"mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);"   // For Firefox, Chrome, etc.
"}";

NSString *insertRule1 = [NSString stringWithFormat:@"addCSSRule('html', 'padding: 0px; height: %fpx; -webkit-column-gap: 0px; -webkit-column-width: %fpx;')", webView.frame.size.height, webView.frame.size.width];
NSString *insertRule2 = [NSString stringWithFormat:@"addCSSRule('p', 'text-align: justify;')"];
//NSString *setTextSizeRule = [NSString stringWithFormat:@"addCSSRule('body', '-webkit-text-size-adjust: %d%%;')", currentTextSize];


[webView stringByEvaluatingJavaScriptFromString:varMySheet];

[webView stringByEvaluatingJavaScriptFromString:addCSSRule];

[webView stringByEvaluatingJavaScriptFromString:insertRule1];

[webView stringByEvaluatingJavaScriptFromString:insertRule2];

感谢AePubReader项目，我在那里找到了这段代码。

- Andrew Brown