I'm developing an hybrid app with cordova. For testing I use the Phonegap Developer App on mobile. This works great in most cases, but now I have a problem.
It seems that all iframes with external content stays empty within the the Phonegap Developer App on iOS. When I build the app to my iPhone the iframe with its content is displayed.
Is this an issue of the Phonegap Developer App which needs to fixed in order to make the iframe work within the Phonegap Developer app, or can I do something to make it work?
I want to use the iframe for youtube embeds for example.
Cordova version: 6.2.0
Following lines are in my config.xml
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
Great! your question is answer of my question that i have been trying to solve for 3 days after work. I have the same problem. I can not display embedded youtube videos on IOS using Iphone developer App. I thought there is a problem with my code or configuration but looks like it was all about app!
My suggestion is don't waste your time. I did it for you :) and couldn't find any solution. let us know if you find solution.
Related
Zendesk Chat Widget not showing in cordova based iOS app, correctly showing in Android and Web.
Even showing in iOS web too. But it doesn't show in Cordova based iOS app.
I simply added script from official docs and added in my React index.html file. It doesn't work for Cordova based iOS app.
Also adding following lines in config.xml. Still getting this issue.
<allow-navigation href="https://*.zendesk.com/*" />
<allow-navigation href="*://*.zdassets.com/*" />
Please help me.
I am creating a video tutorials app using ionic 3. The videos are rendered in iframes from vimeo. There can be 10-12 iframes on a course page which are all loaded at once after the view is loaded.
There is a strange issue of some videos not loading sometimes when I go to the course page. Issue is only with iphones when tested on emulator and actual device using test flight. Issue does not seem to happen when tested with ionic view app in iphone.
photo of how it looks with some videos not loaded
I have already added
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*" />
to the config.xml so that all urls are supported by the iframes in ios.
Any help is appreciated, thanks in advance.
We're using Cordova ~3.9 to load an external web app via the <content> tag in the config.xml file like so:
<content src="http://10.1.1.1:3000"/>
When updating to Cordova 4.0+ we can no longer load an external app via this method; the app loads nothing.
I've looked into the whitelist changes for Cordova 4.0 and tried using the <access>, <allow-intent>, and <allow-navigation> tags to allow access to the external origin without success.
Functional differences:
3.9 - Loads external url as source of Cordova app
4.0+ - No page is loaded, app shows blank screen
How do you load an external site with Cordova 4.0+?
Thanks!
The security policy in Apache Cordova has changed drastically from Cordova 5.0 which does not allow you to access external URL without whitelist plugin.
As far as I know, if you are intended to access externally hosted web application inside Cordova application, better check out hosted webapp plugin
The plugin enables using content hosted in a web site inside a Cordova application by providing a manifest that describes the site. Also it lets you use the features of Cordova plugins too.
I do this, but I have in the index.html file in the project load load the website with
top.location.href = "https://mywebapp.com";
I'm using Phonegap 5.5.2. In config.xml, I have
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
In the plist on Mac, I have Allow Arbitrary Loads set to YES.
I just tested this and it works on iOS Cordova 4.2.1 (the current version as of September 2016):
<allow-navigation href="[your url, wildcards, etc]" />
I put this in the iOS platform section of config.xml.
I'm guessing the problem you were having is an issue that was fixed with a newer version of iOS Cordova since you posted.
People have been saying "Don't use Cordova this way" for years, and they've been wrong for years. It works just fine, and Apple doesn't mind as long as you follow their design and usability guidelines.
options 1:
you can do one thing, inside www/index.html put an iframe which opens http://10.1.1.1:3000
<iframe src="http://10.1.1.1:3000">
<p>Your device does not support iframes.</p>
</iframe>
do apply styles to get desired height, width and other options.
options 2:
use inappbrowser plugin.
var ref = cordova.InAppBrowser.open('http://10.1.1.1:3000', '_blank', 'location=yes');
see more options at their docs
This is not the recommended way of using Cordova. See General Tips
Use the InAppBrowser when opening links to any outside website. This is much safer than whitelisting a domain name and including the content directly in your application because the InAppBrowser will use the native browser's security features and will not give the website access to your Cordova environment. Even if you trust the third party website and include it directly in your application, that third party website could link to malicious web content.
The <content>node in the config.xml is supposed to be the default HTML page that gets loaded when Cordova first loads. Not an IP address. It should reference an HTML page from your www folder.
How can I get a YouTube video to play inline in an Ionic/Cordova/PhoneGap app on iPhone? I've tried all the top results on here and Google to no avail. Whether I embed with an iframe, an object, or via the YouTube iframe api, the video always opens in full screen.
There are lots of iOS apps which achieve this. How are they achieving this? And can this somehow be hijacked and implemented into a Cordova app? Via a Cordova plugin, for example?
I finally got this working.
First, insert the YouTube video like so:
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XL9528Gohe0?autohide=1&playsinline=1&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
Next, close down Xcode and edit config.xml (usually in the root of your project).
Add this line under the other preferences:
<preference name="AllowInlineMediaPlayback" value="true" />
Save it, rebuild the project, open in Xcode and run again. Your YouTube video should now be playing inline. Tested on latest iOS (9.1) on iPhone 6.
As #Zhou Hao added in a comment, you also need
<allow-navigation href="*://*.youtube.com/*" />
Without it, it was working fine in Android, but nothing was displayed in iOS (the content of the iframe was <html><body></body></html>).
After adding it, it worked fine on iOS also.
This is with Cordova iOS 4.2.0.
Use should useplaysinline as player parameter according to the documentation. youtube API
i have created an iPhone App with cordova and the google maps Plugin for Cordova (https://github.com/wf9a5m75/phonegap-googlemaps-plugin). I entered the API Key for Ios and on the Emulator it works great. Also when i test it on my iPhone it works. So i submitted the app to the AppStore and after it gets reviewed i downloaded it from the Appstore but the Map is blank. There are no Control Elements like when the API Key is wrong. Now my question is what i should do now?
I tried:
<access origin="*" />
Changing Bundle Identifier
Check API Key
Take the IPA and installed it manually on a iPhone/iPad (the Map works)
So i think the Probleme must came from Apple or do i see that wrong?
Thanks in advance
The phonegap-googlemaps-plugin is not subjected by <access origin="*" />, because the Google Maps SDK for iOS connects to the internet directly.
Typically the bundle identifier and the API key are mismatch.
Google Maps iOS SDK Integration not loading maps
Is there any error message in Xcode?