Question

我是iOS开发的新手，我使用WKWebView来显示使用Vimeo播放器播放视频的页面。当应用程序启动时，它会正确显示视图，无论它当前处于何种方向。但是，一旦我更改了方向，视图将会放大或者在视频下方有空白。

令人烦恼的是，它并不一致。有时视图显示正确，有时则不显示。如果我尝试放大或缩小视图或尝试在使用应用程序时滚动它通常会自行更正，但即使这样也不是100％可靠。

一些截图（在iPad 2上测试）：

横向（正确）：

纵向（正确）：

横向（不正确）：

纵向（不正确）：

用于产生此结果的代码：

import Foundation
import UIKit
import WebKit

class VideoViewController : UIViewController, WKScriptMessageHandler {

@IBOutlet var containerView : UIView! = nil
var webView: WKWebView?

override func loadView() {
    super.loadView()
    self.webView = WKWebView()
    let contentController = WKUserContentController();
    let scaleToFit = WKUserScript(source: "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta);", injectionTime: WKUserScriptInjectionTime.AtDocumentStart, forMainFrameOnly: true)
    contentController.addUserScript(scaleToFit)
    contentController.addScriptMessageHandler(self, name: "callbackHandler")
    self.view = webView!
}

override func viewDidLoad() {
    super.viewDidLoad()
    refreshUI()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func refreshUI() {
    let url = NSURL(string: "https://photofactsacademy.nl/api/vp.asp?id=152839850")
    let requestObj = NSURLRequest(URL: url!)
    webView!.loadRequest(requestObj)
}

func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
    if(message.name == "callbackHandler") {
        print("JavaScript is sending a message \(message.body)")
    }
}
}

我查看了WKWebView和方向更改的SO，但没有找到任何帮助我的东西。

感谢您的帮助。

Answer 1

你能试试吗

wkWebView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

Answer 2

我能够通过注入这样的javascript重载调用来解决这个问题：

夫特：

 func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
coordinator.animateAlongsideTransition(nil, completion: {
     //Reset Frame of Webview
     webView.evaluateJavaScript("location.reload();", completionHandler: nil)
}

目标C：

-(void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    //Reset Frame of Webview
    [_webView evaluateJavaScript:@"location.reload();" completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
        NSLog(@"error:%@", error);
    }];
}

Answer 3

经过几个小时的挣扎，这对我有用：

<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no'></header><body style='margin: 0px; padding: 0px; width:100%; height:100%;'>...

将正文和视频元素的宽度和高度设置为100％，并通过标题标记禁用用户缩放。

Answer 4

您不需要重新加载整个网页。您只需要重新加载其输入视图即可。确保已正确设置了Web视图的约束，然后在更改方向时添加以下代码。

   // Reload inputs so that webview can adjust its content according to orientation
     [self.webView reloadInputViews];

方向更改后，WKWebView显示内容错误

4 个答案: