代码之家 › 专栏 › 技术社区 › Baxissimo

如何告诉WKWebView要使用的布局宽度?

wkwebview objective-c ios html

Baxissimo · 技术社区 · 4 年前

html 内容存储在 NSData 我想用WKWebView显示的。把它想象成 ASCII HTML <br> 我无法改变这一点。我想要的是能够告诉WKWebView“把这个页面放在1000像素宽的屏幕上,即使不是这样”,然后用户可以水平滚动以查看较长的行(如果需要),或者缩小直到长的行适合。

我试过很多方法,但都没有成功。

我试着用WKWebView的 frame 和 contentSize (无影响)
我试着改变WKWebView的UIScrollView 框架 和 内容大小 (无影响)
我尝试添加用户脚本 [config.userContentController addUserScript:script] (在使用 loadData 或 loadHTMLString . 也许他们只能通过URL加载?)
尝试向的html字符串本身添加前导 <meta name='viewport' content='width=2000'> (这使得视图可以水平滚动到2000像素,但html内容仍然以设备宽度包装)
尝试将WKWebView放在一个单独的UIScrollView中 框架 内容大小 设置为比屏幕宽。 (无影响)

我同意一个需要在HTML本身附加或预先添加内容的解决方案,但是我不希望对CSS进行修改,从而对文档的内容做出假设。因此,像viewport meta这样的东西很好,但是为特定的元素标记添加特殊的CSS覆盖并不是很好(例如,使所有 span display: inline-block; ). 如果iosapi本身有一种方法可以诱使WKWebView在比屏幕更宽的范围内进行布局,那就最好了。

设置很简单。我有一个 MyUIViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  _webView = [[WKWebView alloc] initWithFrame:frame configuration:config];
  [self.view addSubview:_webView];
  [_webView loadData:_data
                   MIMEType:@"text/html"
      characterEncodingName:@"UTF-8"
                    baseURL:_baseURL];
}

0 回复 | 直到 4 年前

skaak 4 年前

如果你把你显示的东西嵌入某个标签 code 或 pre (最简单的)或让CSS打破它的方式,你想(不太容易)我认为它会解决你的问题。

那为什么不把你想展示的东西放进去呢 之前 ?

Ol Sen 4 年前

A-用户代理

您的webview假装是桌面浏览器( )因此,这一个的css规则是负责的,而不是那些移动设备。您可以使用下面的代码来更改UserAgent。但是这个解决方案是不方便的,因为它修复了你的webview,使之与css@media格式一起使用,而css@media格式不适用于较小的屏幕。相反的问题,你会弹出,网页缩放如此之小,他们几乎不能正常使用取决于你的设备。

[self.webView setCustomUserAgent:@"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4"];

WKWebViewConfiguration::defaultWebpagePreferences: //to another

WKContentMode::preferredContentMode = WKContentModeDesktop;

(没有测试,如果这能帮上大忙,一劳永逸地解决)

WKWebViewConfiguration::(BOOL)ignoresViewportScaleLimits = YES

B-树分析

复杂的解决方案,你连接到然后踢出 <br> XML解析器 从中可以看出,即使在iOS内部,也至少有3种不同的现成框架。对哪一个最适合你的场景的赤裸裸的理解正在吞噬你的时间。值得一提的是,HTML实际上 NSHTMLTextDocumentType 哪个是 NSAttributedStringDocumentType 哪个是 NSAttributedString NSString 你可以去的地方

NSAttributedString *document = //your document
[document stringByReplacingOccurrencesOfString:@"<br>" withString:@""];

(这样做的问题是,您可能不想解析出所有内容 <br>

D-注入js或css

如你所说,你可以尝试注射或 js公司 这就推翻了布局问题。也很复杂,不适用于所有可能的内容,因为它是太具体,这个特定的网页。一个薄弱的解决方案也是因为网页可能会改变(如果它不是你的),所有的事情都必须重新做,因为它打破了。但你这样做的出发点是

userContentController = [[WKUserContentController alloc] init];
NSBundle* bundle = [NSBundle bundleForClass:[self class]];
NSString* scriptLocation = [bundle pathForResource:@"webscreen" ofType:@"js"];
NSString* scriptSource = [NSString stringWithContentsOfFile:scriptLocation encoding:NSUTF8StringEncoding error:nil];
WKUserScript* userScript = [[WKUserScript alloc] initWithSource:scriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
[userContentController addUserScript:userScript];
[userContentController addScriptMessageHandler:(id<WKScriptMessageHandler>)self name:@"webscreen"];
config.userContentController = userContentController;

可以使用调整UIView的大小(iOS上不可用) [self resizeSubviewsWithOldSize:NSZeroSize]; 但我认为你仍然可以用另一种方式在你的内容上使用cgafinetransform。这就是macOS上的样子。像。。

- (void)resizeSubviewsWithOldSize:(NSSize)oldSize
{
    CGRect bounds = NSRectToCGRect(self.bounds);
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformScale(transform, 2.0, 2.0);
    CGRect childBounds = CGRectApplyAffineTransform(bounds, transform);
    _webView.frame = childBounds;
}

F-将WKWebView移到UIScrollView中

这可能是最快的方法来控制你的网页的宽度,同时让它的一部分提供给用户。整个实施你的 WKWebView UIScrollView 并将此视图而不是“旧”的webview放置在ViewController中。缺点是,这可能与网站缩放和HTML文档的本地滚动行为相冲突。你必须知道什么时候去哪里,什么时候去。但如果需要,您也可以告诉这个新的UIScrollView进行修复。WebViews框架可以大于设备的可见矩形。

希望有一些想法给你。想知道你最后的解决方案是什么。干杯