Instagram embed not working on some mobile devices - android-webview

It loads the placeholder "View this post on Instagram" instead embedded media. Standard Instagram embed code is used, and this happens both in Chrome and Firefox browsers on the same device. Interesting, it is happening on Android and iOS, but only on small number of devices I test.
Any idea?

I ran into the same issue using a WKWebView in iOS 12. The solution that worked for me was to use an iframe with the standard link with "/embed" as the last path element, rather than the embed code provided by Instagram. Example from a viewDidLoad():
let embed = "<iframe src=\"https://www.instagram.com/p/BwdGxDGAOcP/embed\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowtransparency=\"true\"></iframe>"
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
let webview = WKWebView(frame: view.frame, configuration: config)
webview.uiDelegate = self
view = webview
webview.loadHTMLString(embed, baseURL: nil)

Related

WKWebView Dark and Light Mode with dynamic URL in Swift 5

I created WKWebView that doesn't have one url. User use this WKWebView as Safari means user can search anything on WKWebView. I am facing one issue when I change dark and light mode my web view will show me only white(Light) mode. My app is working on both mode all things working fine except WKWebView.
Already search on SO not find any related question on this.
how to use iOS 13 darkmode for wkwebview
I refer this blog but it's static url so it will not help me out
https://useyourloaf.com/blog/using-dynamic-type-with-web-views/
Also checked opaque and background property but not working for me!
IMPORTANT
User can search anything like google.com, photos or any surfing etc.
class DownloadViewController: UIViewController {
#IBOutlet weak var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView.uiDelegate = self
webView.navigationDelegate = self
webView.load(URLRequest(url: URL(string: "https://www.google.com")!))
webView.allowsBackForwardNavigationGestures = true
webView.allowsLinkPreview = true
}
}
First I am loading Google site then depend on user(Totally dynamic not one url here).
Please suggest me! Thank you.
You can use injecting CSS technic to add Light/Dark feature to your loaded web pages e.g:
// Load a web page
webView?.load(URLRequest(url: URL(string: "https://google.com")!))
// Inject Light/Dark CSS
let lightDarkCSS = ":root { color-scheme: light dark; }"
let base64 = lightDarkCSS.data(using: .utf8)!.base64EncodedString()
let script = """
javascript:(function() {
var parent = document.getElementsByTagName('head').item(0);
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = window.atob('\(base64)');
parent.appendChild(style);
})()
"""
let cssScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
webView?.configuration.userContentController.addUserScript(cssScript)
Result:
To support page changing you can move insertion code to didCommitNavigation notification:
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
...
// Inject CSS here
}
NOTE: It doesn't work with any web page in general because some of web sites can hardcode colors of background, fonts etc. but you can tune specific pages as well by overriding its CSS.
Already search on SO not find any related question on this.
Interesting that you mention this, as this has been a question addressed quite a few times already. A quick search will show many good answers and threads, for example: this one.
That being said, the quick answer is:
WKWebView can adopt light and dark mode, like any other UIView/NSView. You can manually set the interfaceStyle on the appearance, or it will inherit it. More details here overrideUserInterfaceStyle.
But
Probably the problem you are facing is that even though the WKWebView is using the dark interfaceStyle, websites still show on light mode. That is because those websites (google and any other website/URL) are independent and handle their style on their own. Some of them adjust to match your device's interface style, but not all. In short, even if WKWebView is on dark mode, Google will load a white background if they want to do it.
As mentioned by others, you can change this behaviour by manually injecting CSS, please check those answers if that is what you want to do, check also the link I posted at the beginning of this answer where they discuss that approach.
As in android web views(force_darkmode), Apple has not provided support for dark mode web-views yet. you can explore safari with a few reputed websites, even though they don't convert to dark mode.
so we should wait for Webkit dark mode support till then. These CSS injections are not the best practice or robust solution.

Unable to open MS Word and PDF docs with SFSafariViewController in latest iOS 13.0

We are trying to use SFSafariViewController to browse a Word document from our iOS Mobile app using Swift as it gives ReaderView and Font Increase/Decrease within the App. Everything works as expected on the Simulator with 12.2 ios version, however when we published the changes to TestFlight and started using the app on a real phone ios 13.0 version the SFSafariViewController shows the FileName and says "Open in 'Dropbox' 'More... '"
https://i.stack.imgur.com/R595d.jpg
we want to disable/remove that option to choose different apps to open the word/pdf docs and display the content directly within the app. Would greatly appreciate if someone can help remove this option and directly display the documents like below.
https://i.stack.imgur.com/EhFec.png
Below is the code. Can someone please help how to resolve this issue?
func openGuidelineSafari(passedURL: String) {
let allowedCharacterSet = CharacterSet(charactersIn: " ").inverted
let escapedString = passedURL.addingPercentEncoding(withAllowedCharacters: allowedCharacterSet)
let url = URL (string: (escapedString!))
let config = SFSafariViewController.Configuration()
config.entersReaderIfAvailable = true
let vc = SFSafariViewController(url:url!, configuration: config)
vc.delegate = self
present(vc, animated: true)
}

Open new tab from WKWebView html content in safari app extension popover

I'm developing a browser extension that share code between chrome and safari, basically it's an html page that I load up in a WKWebView on safari app extension (and an iframe on chrome extension).
Everything works fine apart from links that won't open in the safari app extension popover if they have target="_blank" or are popups like facebook login.
Anyone know if it is possible to have safari open them up as if clicked on in an ordinary safari tab?
I've tried to see if the WKWebView sets a global safari object in my html content, but it seems not, so this Safari Extension Popover Links does not work (results in ReferenceError: Can't find variable: safari).
This is how I load the web view in my SafariExtensionViewController:
override func viewDidLoad() {
super.viewDidLoad()
...
self.view.addSubview(webView)
webView.navigationDelegate = self
...
webView.load("\(baseUrl)?url=\(currentUrl)")
}
and an extension to make the load part work:
extension WKWebView {
func load(_ urlString: String) {
if let url = URL(string: urlString) {
let request = URLRequest(url: url)
load(request)
}
}
}
Safari Technology Preview 77 (6March 2019) and likely 12.1.x of regular Safari.
Made the window.safari object available in frames opened to safari-extension:// resources
https://webkit.org/blog/8658/release-notes-for-safari-technology-preview-77/
So if you go by that method you should be OK.

WKWebview is not showing proper font from remote URL

I am loading a remote url in WKWebview where only content is text. Text is loading properly but there in site they used 'Nunito' font, which is not showing here in my side. When i open url in browser text are showing properly with font even in safari borowser.
Here is my Code
let urlStr = "http://islamintel.com/cms/about-us"
if let url = URL(string: urlStr) {
let request = URLRequest(url: url)
wkWebView.load(request)
}
You need to add custom font (i.e Nunito) in the app. Here is the reference link on how to load custom font in WKWebView.

PDF file not shown in iPad webView

I have a Swift application that opens a PDF file in webView with the function webView.load(request).
It perfectly works at debug time with the simulator, but when launched in the real device (an iPad) the PDF file is not shown.
The app does not set any error.
Any help is welcome
This might be so obvious question: Is your iPad connected to internet?
Then maybe it's because your link isn't and "https://...." but just an "http://" and maybe the webview won't open it because of that
The PDF file is located in the default documents folder.
Any loading to the webView is working, but not the loading of a PDF file.
The strange is that the same code works in the simulator.
For Swift 3 use this
let url = URL(fileURLWithPath: filePath)
let urlRequest = URLRequest(url: url)
webView?.loadRequest(urlRequest)