Hi,
I'm a Cordova app developer so I don't have much experience writing iOS native code. I recently enabled fullscreen API in WKWebView in our app because we needed to display some elements in full screen. This is the code I used:
[configuration.preferences setValue:[NSNumber numberWithBool:YES] forKey:@"fullScreenEnabled"];
Where the configuration variable is an instance of WKWebViewConfiguration. This works fine but after leaving the full screen mode then WKContentView stops resizing after rotating the device. E.g. if my device is in portrait mode and, after leaving full screen, I change to landscape the content of the WebView is cut-off, it doesn't fill the full screen. The parent WKWebView does adapt to the full screen according to the "Debug View Hierarchy" feature: WKWebView is 736x414, WKContentView is 414x736.
I found this SO post where they suggest using autoresizingMask and constraints equal to the parent view. I tried to do the same, this is what I tried:
[wkWebView.topAnchor constraintEqualToAnchor:UIApplication.sharedApplication.keyWindow.topAnchor].active = YES;
ButkeyWindow.topAnchor is null, and the same happens with all the superviews of WKWebView. I also tried this, but it didn't work:
wkWebView.frame = UIApplication.sharedApplication.keyWindow.bounds;
At this point I ran out of ideas. How can I fix this problem?
Here are the steps to reproduce the problem in a blank Cordova project:
Create a blank Cordova project: cordova create test-resize-fullscreen com.example.helloworld HelloWorld
Edit www/index.html and add an embedded Vimeo video (iframe) in the content. I guess you can use Youtube or something else too. Ours is: <iframe title="Vimeo Video" src="https://player.vimeo.com/video/34141064" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" width="400" height="300"></iframe>
Edit the Content-Security-Policy in index.html to allow Vimeo/Youtube videos. In my case I just added "*".
Edit config.xml and add this line to let the iframe load: <allow-navigation href="*" />
Add the iOS platform: cordova platform add ios
Edit the file "platforms/ios/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m" to enable full screen. Basically you need to add this code inside the createConfigurationFromSettings function: [configuration.preferences setValue:[NSNumber numberWithBool:YES] forKey:@"fullScreenEnabled"];
Run the app in a device/simulator: cordova run ios
Rotate the device, the content should adapt fine.
Put the device in portrait mode and click the full screen button in the video.
Leave full screen and rotate the device again. The content should no longer adapt to the screen.
Thank you!
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
YouTube now requires a Referer to be sent to be able to embed Youtube videos, otherwise the videos won't work. But WKWebView doesn't send a Referer when using a custom scheme, so Youtube videos stopped working in that case.
This affects Ionic apps, both using Cordova or Capacitor. There's an open issue for Cordova and another one for Capacitor. In these apps, the app is served using a custom scheme like capacitor://localhost or ionic://localhost.
I tried modifying the Ionic WebView source code to force adding a referrer to the URL loaded using WKWebView's loadRequest:
[request addValue:@"https://my.test.app" forHTTPHeaderField:@"Referer"];
[_engineWebView loadRequest:request]
But the Referer is still not sent in the Requests, I guess because the app is using a custom scheme (e.g. capacitor://localhost). However, if I modify this code to force loading an "online URL" (using https) instead of capacitor://localhost, then the my.test.app Referer is sent to the requests.
Is there any way to make WKWebView send a Referer when using a custom scheme?