iframe in phonegap

  • 1
  • Question
  • Updated 5 years ago
hi i want to use iframe in phonegap wherein inside the iframe is another site. can i do it in phonegap actually?
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes, that's possible.
Be aware that Apple may reject an app if you don't have additional functionality.
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
Hi petra thanks for the fast reply.but i have a problem i does not show anything.i put the iframe inside a div.but nothing happens.can you help me?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. In which OS does this happen?
2. How did you whitelist the external website?
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
In android. In config .xml file i use * in access origin.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That would only be correct when building with PGB3.x
However, with PGB-cli-5.x, you need cordova-plugin-whitelist, the allow-navigation rule, and a CSP if you wish.
See the plugin's documentation.
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
i do this in config.xml



and in the index.html



im not quite sure if im using the cli-5 coz im just download the phonegap using node.js which is phonegap 2.9. then in node.js cli i create the project.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If you want to build locally, you are lost here. This is the Phonegap Build forum. If you don't want to build locally, then node.just and Phonegap .9 should not be used.
Please, take your pick first.

If using PGB: where is cordova-plugin-whitelist in your config? And did you read and apply its documentation?
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
im uploading it to build.phonegap.com but im creating it using aptana and emulate using the chrome ripple
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
i was confuse right now, ever since i use this method based on what i under stand from the start, i download the phonegap using the cli of nodejs then in order to create a phonegap apps i go to the node.js cli then i type this;

d:\phonegap dir\lib\android\bin\ create

then automatic it was created all the folder and files..
one of the files include the cordova.js




let me know if i miss something
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Michael Anthony,
Yes you are confused. Petra will explain shortly.
Jesse
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Let's see:
1. You installed node, java, phonegap, sdk's
2. You created a 'project', and Cordova delivered all kinds of directories, like /plugins, /hooks, etc. and also files like androidManifest.xml
3. Then you went into one of those directories (called /www) and supplied self-written html, javascript, css and image files.
4. Next, you zipped up everything you wrote all by yourself, anyway. You ignored all those directories, files and scripts that were created by Phonegap/Cordova
5. You upload your zip file, which contains your own assets, to PGB without anything that Cordova created.

How smart do you consider this process?

(Right.
Using PGB means that you don't need node, Phonegap/Cordova, created projects, installed plugins, java or SDK's. All you need are your assets - html5, js, css, images - and a config.xml file;
The required contents of that config.xml file has changed over the years. Study the PGB docs and the recent blogs to find out how to config these days)
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
i was just really confused due to many tutorial over the internet. anyway i just want to make this thing right so i just go back from the start.
1. i download the phonegap using cli after i download the nodejs.
2. i create the file using the instruction give to your page and it show like this:

3. the one that i should replace the codes is the index.html inside the www. and the config.xml is the one that show in the directory right? just want to clarify everything coz when i add android platform it seems another file has been created which is the same to the first one i created. it was just differ from the path.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Michael, why do you insist on downloading and installing node and phonegap? I had hoped to clarify that you shouldn't.
2. Why do you change usernames in the middle of a thread? Trying to erase a trail, huh? :-)
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
Coz, actually this is not my account.i just borrow it to my colleagues because of this issue..>:) if that's the case how can i have all of these file i dont use the cli.
i just follow this tutorial link https://www.youtube.com/watch?v=Smz_I...

suggested steps to be followed
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Write a mobile website, preferably using a javascript framework like jQM, Sencha, Angular, Bootstrap, etc. You may name files and directories as you like.....the 'starting page' should be called index.html, though.
Test the mobile website in several browsers.
2. Add a reference to 'phonegap.js' in index.html without actually including such file Make sure index.html is in the root of your website directory.
3. Write a configuration file as outlined in the Configuring Section of the PGB documentation. Make sure this file is also in the root of your webste directory.
4. Add icons and splashes as outlined in the Icons and Splashscreens section
5. Add plugins to the config as needed, as outlined in the Plugins section.
6. Add whitelisting when needed, as outlined in the Whitelisting section and the whitelist plugin's docs.
7. Zip up the CONTENTS of your website directory (not the directory itself!) and upload that to PGB.

Presto!
See? No installation of Phonegap, node, SDK and whatever is needed.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Miggy that tutorial is wrong. Thank you for pointing us to it. I have put a nasty note on that video. This is the message i wrote.

I am one of the volunteer support people for Phonegap. DO NOT USE THIS TUTORIAL. IT IS WRONG. You should NOT build an app as this video shows. IT WILL NOT WORK. Notice at the end of the video there is NO demonstration of a working app. DO NOT USE THIS TUTORIAL. IT IS WRONG. IT WILL NOT WORK TO CREATE APPS WITH "Phonegap Build" DO NOT USE. My handle on the forum is jessemonroy650.


We need to start over with you.
Jesse
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Poor kid!
All he wanted to know is: do iframes work?
:-)
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
i see. well i just use this just to create all the default features based on the tutorial on the web yet i know from the very start that on the index.html files is the one that i need to configure plus the config.xml. thanks for the clarification.

anyway this is inside the config.xml, how to include the whitelisting in order the iframe work. this is my new config.xml
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
how to include the whitelisting in order the iframe work
I already told you ten posts and three hours ago. But you don't seem to enjoy reading.
I said:
However, with PGB-cli-5.x, you need cordova-plugin-whitelist, the allow-navigation rule, and a CSP if you wish.
See the plugin's documentation.


So, you included the plugin. That's fine.
Now, did you go to the plugin's documentation? Did you read and apply the piece about the allow-navigation rule? Did you read and for the time being ignore the CSP part?
If so, you're good. If not, do it.
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@petra this is the new config.xml


<?xml version='1.0' encoding='utf-8'?>
<widget id="com.jupinno.ilearn" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Cert2go</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>

!--Icon-->
<icon src="icon.png" />
<icon src="res/icon/android/ldpi.png" platform="android" qualifier="ldpi" />
<icon src="res/icon/android/mdpi.png" platform="android" qualifier="mdpi" />
<icon src="res/icon/android/hdpi.png" platform="android" qualifier="hdpi" />
<icon src="res/icon/android/xhdpi.png" platform="android" qualifier="xhdpi" />
<icon src="res/icon/android/xxhdpi.png" platform="android" qualifier="xxhdpi" />
<icon src="res/icon/android/fr-xxhdpi.png" platform="android" qualifier="fr-xxhdpi" />

<!--Splash Screen-->
<gap:splash src="res/screen/android/ldpi-portrait.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/mdpi-portrait.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/hdpi-portrait.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />

<splash src="res/screen/android/ldpi-portrait.png" platform="android" qualifier="ldpi" />
<splash src="res/screen/android/mdpi-portrait.png" platform="android" qualifier="mdpi" />
<splash src="res/screen/android/hdpi-portrait.png" platform="android" qualifier="hdpi" />
<splash src="res/screen/android/xhdpi-portrait.png" platform="android" qualifier="xhdpi" />
<!-->
<splash src="fr-xhdpi.png" platform="android" qualifier="fr-xhdpi" />
<splash src="portrait-xxhdpi.png" platform="android" qualifier="port-xxhdpi" />
<splash src="landscape-xxhdpi.png" platform="android" qualifier="land-xxhdpi" />-->
<platform name="android" >
<preference name="orientation" value="portrait" />
</platform>

<content src="index.html" />
<plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" subdomains="true" />

<allow-intent href="http://*.lawsoc.cert2go.com/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

<preference name="android-minSdkVersion" value="9" />
<preference name="android-maxSdkVersion" value="19" />
<preference name="android-targetSdkVersion" value="10" />
<preference name="android-installLocation" value="auto" />

<plugin name="org.li8.inappbrowser" spec="0.1" source="pgb" />
<plugin name="com.phonegap.plugins.childbrowser" spec="5.0.0" source="pgb" />
<plugin name="net.tunts.webintent" spec="0.2.1" source="pgb" />
<plugin name="com.indigoway.cordova.whitelist.whitelistplugin" spec="1.1.1" source="pgb" />
<plugin name="com.jamiestarke.webviewdebug" spec="1.0.8" source="pgb" />

</widget>

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I see plenty of trouble in the areas Plugins, Splashes and Preferences.
But right now I wonder most why you still didn't insert an 'allow-navigation' whitelisting rule in order to enable your I frame to display something.

Also, what is that second whitelist plugin at the bottom doing there? And why did you include (old, outdated) inappbrowser and childbrowser plugins, if you intend to use an I frame?

This is slowly becoming ridiculous.
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
can you help me to correct this?

is this the one?


<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Yes. This one is better. IT IS ALSO INSECURE.
<allow-navigation href="*" />
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
i tried it but no luck. the iframe show nothing..
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse actually that is the reason why some phonegap user became frustrated due to lot of phonegap tutorial videos which led some developer to confuse on how it should start using phonegap like what happen me before. even this link:

https://www.youtube.com/watch?v=7YCGx...

that's why it was really confuse from the very start if you are a beginner doing this kind of stuff. thanks for clarification. but it seems the iframe problems still persist :)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Web tutorials get outdated quickly (and often, they are written by people who are confused enough, themselves).
You should use the official documentation, instead.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Miggy Thanks for making use aware of this. I will start today reviewing videos on YouTube. The list of bad videos is here:

https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/bad-video-tutorials.md
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@miggy
there is something else wrong with your configuration. Please post your code to a public website so I can look at it. A website like, github, google code, source forge, pastebin etc.

You should at least include your index.html, config.xml, and relate javascript that you wrote (if not included in your index.html).
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse

hi here it is, hope you can help me to correct with it

http://pastebin.com/wNshWggv
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Miggy,
Okay. This step has, as of recent, been missing from some examples and documentation. This is a currently a failing with "Cordova" and "Phonegap". THIS IS MISSING FROM THE PHONEGAP DOCUMENTATION.

I am pointing to the similar Cordova document.

READ: Events -> deviceready

This dated blog post is still valid. I recently upgraded it to cli-5.2.0 It works as expected.

An HTML Boilerplate for Phonegap

Let us know how it works.
Jesse
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse

this my new code now http://pastebin.com/pyXwxk00

but still the iframe does not work..still empty..
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
You've got a ton of problem. Many, many mistakes.
I'll get back to you in 30 minutes

Jesse
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
1. Remove target-densitydpi=device-dpi it is deprecated and causes nothing but problems. I have reported the issue.

2. THIS IS WHY NOTHING IS WORKING. You do NOT have <script src="phonegap.js"></script> in your index.html. THIS IS REQUIRED. documentation -> Getting Started with Build -> See under: Making Sure You can Still Access the PhoneGap API

3. You have <preference name="phonegap-version" value="3.5.0" />. This does not require a whitelist plugin, but this verison will be rejected by Google Play. You should move to <preference name="phonegap-version" value="cli-5.2.0" />.

4. REMOVE THESE. They are not valid version. Let this be the default, for now.

<preference name="android-minSdkVersion" value="9" />
<preference name="android-maxSdkVersion" value="19" />
<preference name="android-targetSdkVersion" value="10" />
<preference name="android-installLocation" value="auto" />


5. DO NOT USE THESE PLUGINS. DO NOT USE pgb as a source.

<plugin name="org.li8.inappbrowser" spec="0.1" source="pgb" />
<plugin name="com.phonegap.plugins.childbrowser" spec="5.0.0" source="pgb" />
<plugin name="net.tunts.webintent" spec="0.2.1" source="pgb" />
<plugin name="com.indigoway.cordova.whitelist.whitelistplugin" spec="1.1.1" source="pgb" />
<plugin name="com.jamiestarke.webviewdebug" spec="1.0.8" source="pgb" />
FIND the appropriate alternative: FOR NOW, these are your Core plugins
Search for third party plugins here

SEE: Deprecation of Public Plugins on PhoneGap Build

Use this as a Boilerplate reference: Phonegap--Generic-Boilerplate7

Jesse





Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse so i just use this default template https://github.com/jessemonroy650/Pho... right? i just customized if ever i want to add something or remove right?

just one question there are many forums or tutorial in the web that does not require phonegap.js sometimes they said it is not necessary or remove it? just for clarification..
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Miggy,

just one question there are many forums or tutorial in the web that does not require phonegap.js sometimes they said it is not necessary or remove it? just for clarification.


What you are reading is misleading. It is possible to build an App without phonegap.js. It will run. It can do many things. including, camera, gps, websockets, etc.

However, if you want to use ANY of the Phonegap plugins, you are required to use phonegap.js. As the documentation says, to Making Sure You can Still Access the PhoneGap API


Once you've deleted the phonegap.js you'll need to make sure that your application can still access the PhoneGap API.

To do so, simply ensure that the following reference is made in your index.html


At that point, your App is connected to that javascript, and it (the javascript) loads all the plugins you have told it to do so in your config.xml

Sorry I broke that like. Here is the correct one.

http://docs.build.phonegap.com/en_US/introduction_getting_started.md.html#Getting%20Started%20with%20Build

Jesse
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
is the phonegap.js is the same with cordova.js? some article said that cordova.js replace the phonegap.js? or i need to have that both?

can i have where can i download the correct phonegap.js?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. You need a reference to phonegap.js OR cordova.js.
Either one. Doesn't matter which one.

2. You don't download and include such file, and if you already have one in your assets, remove it.

Michael, it's all documented. See the Getting Started section of the PGB docs.
http://docs.build.phonegap.com/en_US/...