I have a hybrid mobile app in Mendix. In one page of the app, I am displaying some data with text and also video or website URL embedded.
<iframe id="quizWidget-454107" width="100%" height="900px" frameborder="0" border="none" src="https://www.qzzr.com/widget/quiz/fi9xdWl6emVzLzQ1NDEwNw"></iframe>
Here we are embedding this website, and we also embed youtube URL here.
The issue is, this embedded URL(video/website) shows up in a section on Android phone but not in iPhone. May be Safari does not render iFrame correctly.
Any idea what we can replace iFrame with?
please see an answer to a related question here. I believe You need to add <meta> tags to your index.html page to allow the app to load external content, preferable using a Content Security Policy (CSP).
Related
I create a App with Ionic which embed the twitch player for streams and clips.
var url = https://player.twitch.tv/?video=v${videoId}&time=${time}&parent=localhost
<iframe [src]='url' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
On Android its working perfect but in the iOS App the iframe will not be shown and no player is available. Just a white screen.
Does anybody know what the problem can be related to ios?
I have the same issue. Security limitations are the culprit indeed: I opened the Safari console while the iframe was trying to load and saw this error:
Refused to load https://player.twitch.tv/?channel=...&controls=false&parent=localhost&muted=true because it does not appear in the frame-ancestors directive of the Content Security Policy.
Looking at this security header that Twitch returns, it looks like this:
Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:*
However, when using the Ionic WebView, according to its documentation:
iosScheme
<preference name="iosScheme" value="httpsionic" />
Default value is ionic
Configures the Scheme the app uses to load the content.
Values like http, https or file are not valid and will use default value instead.
So your WKWebView will have ionic://locahost as its application URL by default, which doesn't match the http://localhost and https://localhost prefixes specified by Twitch.
I tried using &parent=ionic://localhost in the Twitch iframe URL. The WKWebView doesn't refuse to open the iframe, but Twitch itself freaks out about the special characters in that parameter and refuses to render its player page.
To me it seems that currently, iOS Ionic/Cordova Apps and Twitch iframes are mutually exclusive.
Edit:
I found a bunch of discussions in the Twitch forum talking about this subject (1, 2), but none of them went technically in-depth to the point where a working solution or workaround could be found. Unfortunately, threads are closed after 1 month of inactivity, so I had to open yet another thread in the Twitch forum explaining the technical details from my point of view. I also added a feature request in their user-voice feedback portal. I'm afraid trying to make Twitch realise / accept that they should do something about mobile embeds is all we can do at this point. Here's the link to it:
https://twitch.uservoice.com/forums/310213-developers/suggestions/44682766-make-embeds-work-on-ios-web-based-apps-like-ionic
How can I get the apple-touch-icon or logo of the website using WKWebView or UIWebView? I've read that getting a favicon is possible, however I plan on using the website's logo as a short cut like in iOS Safari and a favicon is too small for it. Is there a way to scrape metadata from a website in webView to get <link rel="apple-touch-icon" href="apple-touch-icon.png">?
In Firefox for iOS we use a User Script (Link to code on Github) to find the icon that then passes them back to the application which downloads them using native code (Link to code on Github).
I'm trying to implement a chrome app in which I need to show a embed youtube video.
I tried to use a sandbox html page which use the youtube iframe api but it failed. I got the follow error: Uncaught unload is not available in packaged apps.
Can anyone help me with this problem?
You can do it using a webview. Simply take your embed code and swap the iframe tag for webview. No sandbox required :)
<webview width="560" height="315" src="http://www.youtube.com/embed/ZnuwB35GYMY?rel=0" frameborder="0" allowfullscreen></webview>
I've tried a lot of code samples and methods but nothing works.. iframes in phonegap application doesn't load url in src attribute.
I want to learn is it possible to use iframe in a phonegap iOS application. And is there a way to show a website inside my app (except InAppBrowser). InAppBrowser just backgrounds my app and open safari. I want to show a url inside my own interface.
Yes you can have iFrames in your app to show some web pages but you have to be careful about which website you want to load in iFrame because most of the popular websites (FB, Twitter etc) doesn't allow their website to be rendered in iFrame using META tags like this:
<meta http-equiv="X-Frame-Options" content="deny" />
I am developing an app using Appcelerators Titanium. The app consists of a webview. The webview shows i local page, iframe.html, and this iframe's src is pointed to a remote page.
However, this doesn't work out as i expected since it doesn't seem like the remote page can't store cookies when wrapped in an iframe. It works great on desktop and other devices. This seems to be an issue exclusive to iOS. I need the iframe, and i need cookies. What can i do to solve this?