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 Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@petra i was confuse, jesse said that i don't have phonegap.js on the script but i already have cordova.js in the index.html.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
READ THE DOCUMENTATION.
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
ok got it. the one it refer is the file not the script. here it is the latest script:


<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="shortcut icon" href="icon.png">
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/cert2go.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/fastclick.js"></script>
<script type="text/javascript" charset="utf-8" src="js/zepto-1.1.6.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<title>Cert2go</title>
<script>
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown(e) {
e.preventDefault();
}
$("#spiner").hide();
/*- logout -*/
$("#btnlogout").click(function (e) {
e.preventDefault();
navigator.app.exitApp();
});
/*- change picture -*/
$("#btnlawsoc").click(function (e) {
var detail = '';
detail = '<iframe src="http://lawsoc.cert2go.com" frameborder="0" scrolling="yes"></iframe>';
$('#myppage').empty();
$('#myppage').append(detail);
});

</script>
</head>


do i miss something?let me know.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Awesome. Four (4) things.

1) You need only phonegap.js or cordova.js. One or the other. Remove cordova.js.

2) On this code, you don't need the e.preventDefault();. The event does not bubble or cancel. So it does nothing. You can leave it. It does not hurt anything. Remove it later - when you feel more comfortable

function onBackKeyDown(e) {
e.preventDefault();
}


Same here

$("#btnlogout").click(function (e) {
e.preventDefault();
navigator.app.exitApp();
});


3) Not required. Don't do this. It is considered unsafe.

$("#btnlawsoc").click(function (e) {
var detail = '';
detail = '<iframe src="http://lawsoc.cert2go.com" frameborder="0" scrolling="yes"></iframe>';
$('#myppage').empty();
$('#myppage').append(detail);
});

Use a <div> to hide your <iframe>.
If you don't know how to use a hidden <div>, I can show you. It is simple.

4) now add the whitelist stuff.

NOTE DOING THIS WILL MAKE YOUR APP INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add this to your config.xml

<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the followin to your index.html

<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse, thanks so far it's working but i have some more questions to clarify on:

1. is this the one you that you are refering if i want to hide the iframe inside the div:


<div>
<iframe src="http://ilearn.jupinno.com/" frameborder="0" scrolling="yes" width="100%" height="100%"></iframe></div>


because this is the one that I'm using. let me know if it is correct.

2. how can i make my iframe height in fullscreen



3. i was too curious about the link inside the iframe. I try to use the previous link that i put inside the iframe and put it in a browser, it works. but when i put it inside the iframe it doesn't work. do i miss something? I try to put other links and it is ok only to the particular link.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Miggy,

On #1, yes. That's the one. I'm preparing a tutorial for you right now. It will be later tonight before it is done.

On #2, i have not tried that yet, but I expect that height=auto should work.

On #3, i'm not sure because we have made soooo many changes. I think it is because of your whitelist filter.

You have this:

<allow-navigation href="http://*/*" />
<access origin="*" subdomains="true" />
<!--<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />-->


I would change it to this:

<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />


With this code, you are going to the wildcard option - which means accept anything. Previously you had http://, which means only accept those connects that are http://.

This whitelist worksheet should help.
HOW TO apply the Cordova/Phonegap whitelist system

Truthfully, I'd have to look at your code to see why it is not working.

Jesse
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse thank you in advance for that wonderful tutorial. there are lot of tutorial which led us to wrong information.

here is my index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
<link rel="shortcut icon" href="icon.png">
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/cert2go.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/fastclick.js"></script>
<script type="text/javascript" charset="utf-8" src="js/zepto-1.1.6.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
<script type="text/javascript" src="phonegap.js"></script>
<title>Cert2go</title>
<script>
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$("#spiner").hide();
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header" data-theme="a" style="padding:20px 0px;text-align: center">
<h4>iLearn</h4>
</div>
<a href="#lawsoc" id="btnlawsoc"><img src="img/lawsoc-logo.png" width="100%"/></a>
</div>
<div data-role="page" data-theme="a" id="lawsoc">
<div data-role="header" data-theme="a" data-position="fixed" >
<h4>
<a href="#main" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-back ui-nodisc-icon ui-alt-icon ui-btn-left" style="padding-right: 0px;"></a>
Law Soc
</h4>
</div>
<div>
<iframe src="http://lawsoc.cert2go.com/" frameborder="0" scrolling="no" width="100%" height="auto" onload="resizeIframe(this);"></iframe>
</div>
</div>
</body>
</html>



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>
<preference name="phonegap-version" value="cli-5.2.0" />
<!--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" />

<platform name="android" >
<preference name="orientation" value="portrait" />
</platform>

<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="1.1.0" />
<plugin name="cordova-plugin-camera" source="npm" spec="1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-contacts" source="npm" spec="1.1.0" />
<plugin name="cordova-plugin-device" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="1.1.1" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="1.1.1" />
<plugin name="cordova-plugin-file" source="npm" spec="3.0.0" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="1.3.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-globalization" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-media" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-network-information" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="2.1.0" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-test-framework" source="npm" spec="1.0.1" />
<plugin name="cordova-plugin-vibration" source="npm" spec="1.2.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" subdomain="true"/>
</widget>



let me know if i need to delete something. thanks for the help:)
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
@jesse i think i got the solution for the iframe height by putting this inside the iframe properties.


<iframe src="http://**********.com/" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>


this will make the iframe in full screen yet the vertical bar exist.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Tutorial done. You may still have questions, but some questions are answered in the code. So, read the code also.

Code: tutorial-html5ui-hide-show

Working Android App show/hide iframe 1.0.0
Photo of Miggy

Miggy

  • 56 Posts
  • 0 Reply Likes
Wow! thanks! really appreciate for all the help!and also to @petra.

to both of you, thank you very much! :)
Photo of Anders Borg

Anders Borg

  • 329 Posts
  • 12 Reply Likes
Here's code for a similar situation in one of my own apps:

index.css (a bit "belt-and-suspenders" I guess, but it works):

body, html, iframe, div {
display: block;
margin: 0px;
padding: 0px;
border: none;
width: 100%;
height: 100%;
}

.webapp_iframe {
line-height: 0px;
display: block;
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}

index.html (the URL is actually set via Javascript (hence the id), but a static one should work as well):

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
...
<body onload="onLoad()"><iframe src="[some site]" class="webapp_iframe" id="webapp_iframe" seamless="seamless"></iframe></body>


config.xml (selected parts):

<access origin="*" />
<allow-navigation href="*" />
<content src="index.html" />
<preference name="phonegap-version" value="cli-5.2.0" />
...
<gap:plugin name="cordova-plugin-whitelist" source="npm" />