WKWebView Mac浏览器如何启用HTML5全屏模式？

Question

我用Swift最新版本和xcode 8.3.3制作了一个简单的浏览器。 我希望能够在html5视频（如YouTube上）中全屏播放。 目前在YouTube上显示“全屏不可用”。 旧版WebView也有同样的问题……在iOS上可以正常工作。

编辑。也许这是不可能的。我试图查看JavaFX WebView和WPF WebBrowser，它们有相同的限制。实际上，有个人能够在WPF WebBrowser上允许YouTube视频全屏播放，但只能创建一个完整的HTML页面： Playing youtube in full screen in WebBrowser control 当然，我不能为每个视频在页面上创建一个网页（至少我不知道如何，如果您知道，请告诉我）。

---

我用Swift最新版本和xcode 8.3.3做了一个简单的浏览器。一切都正常，但我无法像旧的WebView那样激活插件。由于我在Mac上，应该能够激活插件（我知道在iOS上不可能），我错了吗？ 另外（在旧的WebView中也有同样的问题），没有办法为HTML5视频激活全屏模式（至少我不知道如何做）。

@IBOutlet weak var webView: WKWebView!
let urlString = "http://myurl.com/"
self.webView.load(NSURLRequest(url: NSURL(string: urlString)! as URL) as URLRequest!)
self.webView.configuration.preferences.plugInsEnabled = true

这是使基本浏览器工作的非常基础的代码。但是在WKWebView的Interface Builder中没有启用插件的选项，我真的不知道如何允许html5视频全屏播放（例如YouTube）。

编辑。好吧，我终于找到了插件部分的答案： self.webView.configuration.preferences.plugInsEnabled = true 非常简单，但很难理解在哪里找到它，我不得不去这里： https://developer.apple.com/documentation/webkit/webpreferences 并猜测...

- LiefLayer

Answer 1

macOS 12.3更新

从iOS 15.4和macOS 12.3开始，WKPreferences有了新的属性isElementFullscreenEnabled。现在使用变得非常简单：

myWebView.configuration.preferences.isElementFullscreenEnabled = true

原始答案（macOS 12.3之前）

不要使用私有API，你可以通过在配置中使用KVO更改属性来完成此操作。

使用Swift 5：

let configuration = WKWebViewConfiguration()
configuration.preferences.setValue(true, forKey: "fullScreenEnabled")
let webView = WKWebView(frame: .zero, configuration: configuration)

在 macOS 10.15 和 11 上测试通过。

- vicegax

---

谢谢！我用这个成功让我的代码工作了。现在，webView看起来像是一个scrollView，并且有滚动条。使用KVO有没有简单的方法可以禁用webView上的滚动条？ - SouthernYankee65

我应该澄清一下。当webView不处于全屏模式时，它上面有水平和垂直滚动条。 - SouthernYankee65

看起来内容可能比WebView大，或者可能被缩放了。也许您想为该问题创建一个更详细的新问题@SouthernYankee65？ - vicegax

Answer 2

为了让WKWebView使用全屏HTML，您需要访问私有API（请参见https://github.com/WebKit/webkit/blob/master/Source/WebKit/UIProcess/API/Cocoa/WKPreferences.mm#L232-L240），在WKPreferences中。如果您在桥接头文件中使用Swift，请添加以下内容：

#import <WebKit/WebKit.h>

@interface WKPreferences ()
-(void)_setFullScreenEnabled:(BOOL)fullScreenEnabled;
@end

只需要简单地调用它：

let webView = WKWebView(frame: view.frame)
webView.configuration.preferences._setFullScreenEnabled(true)

如果您在退出全屏后发现网页视图的大小发生了奇怪的调整，我发现以下方法可以解决这个问题：

webView.autoresizingMask = [.width, .height]
view.addSubview(webView)

webView.translatesAutoresizingMaskIntoConstraints = false
webView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
webView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
webView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true

注意：由于您正在访问私有API，因此将被Mac App Store拒绝。

- Soneé John

---

经过这么长时间，我没想到会得到一个很好的答案（而且还是正确的）。我甚至不再使用Mac作为我的主要操作系统，但我用它来尝试你的答案。谢谢，这个方法有效。不确定为什么苹果不公开这个API，这正是修复Webview中HTML5播放器所需的。 - LiefLayer

很棒的解决方案，感谢 @Soneé John！我注意到在做出这个改变后，webView 似乎有点不同。最终我使用了Safari 11（MacOS）用户代理 - 它按预期工作。但是， 默认用户代理不能加载视频。而Chrome 70（MacOS）用户代理无法加载所有的照片。 - david-littlefield

@TheAltruist，你的Github页面似乎消失了？我试着查看你的文档，但是Github告诉我该页面无法找到。 - SouthernYankee65

@SouthernYankee65，我更改了用户名并删除了旧存储库，但我能够恢复与此帖子相关的内容，并将其添加为答案。 - david-littlefield

Answer 3

@SoneeJohn发布的解决方案很清晰，但它涉及使用桥接头文件。我以前从未手动处理过Objective-C或修改过私有Swift框架。我不知道要使用什么关键字。而且，我找到的资源似乎更多地涉及创建原始框架，而不是修改现有框架。我不知道这是否是正确的实现方式，但它使全屏模式在web视图中工作。

步骤：

下一部分中有参考每个步骤的照片。

1. 点击Xcode中的“项目”
2. 点击“添加目标”
3. 点击“Cocoa Framework”
4. 点击“下一步”
5. 在“产品名称”中输入标题
6. 点击“完成”
7. 在“链接的框架和库”中点击“添加项目”
8. 在“搜索”中输入“WebKit”
9. 点击“WebKit.framework”
10. 点击“添加”
11. 点击您的“Project.h”文件
12. 从解决方案中添加“导入”代码

#import <WebKit/WebKit.h>

13. 从解决方案中添加“全屏”代码

@interface WKPreferences ()
-(void)_setFullScreenEnabled:(BOOL)fullScreenEnabled;
@end

14. 将您的“项目框架”导入到Swift文件中
15. 在您的Web视图中实现“全屏”代码

webView.configuration.preferences._setFullScreenEnabled(true)

为了让全屏模式正常工作，我不得不将用户代理更改为Safari 11。

webView.customUserAgent = """
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13) AppleWebKit/604.1.31 (KHTML, like Gecko) Version/11.0 Safari/604.1.31
"""

- david-littlefield

---

我无法测试这个解决方案（我不再拥有Mac了），但是我感谢您的回答。多年前，真的很难找到这个答案。 - LiefLayer

Answer 4

答案是没有答案。目前在Mac上没有API可以获得全屏html5。我尝试在Windows上制作相同的应用程序，并且目前UWP的WebView能够全屏显示（WPF的旧WebBrowser无法全屏显示）。

我认为唯一的方法是向苹果提交反馈。

- LiefLayer

---

macOS 10.13.4 没有什么新内容，这对于 Mac OS 开发者来说是一种遗憾。 - LiefLayer

请查看Soneé John的回答。实际上没有公共API可以使全屏工作，但有一个您可以使用的私有API。 - LiefLayer