hi i want to use iframe in phonegap wherein inside the iframe is another site. can i do it in phonegap actually?
- 56 Posts
- 0 Reply Likes
Posted 5 years ago
- 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.
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
- 56 Posts
- 0 Reply Likes
ok got it. the one it refer is the file not the script. here it is the latest script:
do i miss something?let me know.
<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.
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
Same here
3) Not required. Don't do this. It is considered unsafe.
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
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the followin to your
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';">
- 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:
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.
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.
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:
I would change it to this:
With this code, you are going to the wildcard option - which means accept anything. Previously you had
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
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
- 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
config.xml
let me know if i need to delete something. thanks for the help:)
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:)
- 56 Posts
- 0 Reply Likes
@jesse i think i got the solution for the iframe height by putting this inside the iframe properties.
this will make the iframe in full screen yet the vertical bar exist.
<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.
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
Code: tutorial-html5ui-hide-show
Working Android App show/hide iframe 1.0.0
- 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! :)
to both of you, thank you very much! :)
- 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):
config.xml (selected parts):
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" />Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers

