Servoy Forum

Posted: **Wed Jun 14, 2017 2:11 pm**

Hi,

I'm trying to link to a Servoy NG Solution, using an iframe in a Phonegap app. The iframe is coming up blank and i've been looking at the Adobe forums trying to find what i'm doing wrong. After making sure i'm doing everything right on the Phonegap side of things I thought maybe there is a unique condition when a Servoy solution is being called to and perhaps someone here might know more about it.

Thanks in advance.

Posted: **Thu Jun 15, 2017 2:29 am**

Hi Thomas,

Can you share the index.html you are using to do the phonegap build?

Here you have a sample:

<html>
<head>
<script src="phonegap.js"></script>
<script src="bridge.js"></script>
<script src="push.js"></script>
</head>
<body style="margin: 0px;">
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin-top: 30px; margin-left: 10px; margin-right: 10px;">
<iframe src="http://208.43.220.45:8080/MisPrecios2017/solutions/misPrecios/index.html" onload="Bridge.init(this);" height="100%" width="100%" frameborder="0"></iframe>
</div>
</body>
</html>

Regards,

Posted: **Thu Jun 15, 2017 10:35 am**

Hi Juan,

This the index.html i'm currently using, it simplified it to try and get the iframe working before adding anything extra.

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
</head>
<body>
<div>
<iframe src="http://192.168.0.12:8080/solutions/testCamera/index.html?f=frmCamera" height="400" width="300"></iframe>
</div>
</body>
</html>

Thanks

Posted: **Thu Jun 15, 2017 12:15 pm**

I got the answer from a guy on the Phonegap forum, I'd forgotton to include the cordova-whitelist-plugin which solved my problem and displayed the solution in the iframe.

Posted: **Thu Jun 15, 2017 10:53 pm**

great!

Posted: **Tue Jan 30, 2018 11:48 pm**

Thomas.shuttleworth wrote:I got the answer from a guy on the Phonegap forum, I'd forgotton to include the cordova-whitelist-plugin which solved my problem and displayed the solution in the iframe.

Could you please provide the lines you had to put into your
config.xml
and
index.html
to get it to work & solve the problem?
Thanks
Rafi

Posted: **Thu Feb 01, 2018 2:39 pm**

Hi Rafi, the problem I was having with iframe was fixed by the addition of <plugin name="cordova-plugin-whitelist" source="npm"/> to the config.xml. By this point I had tried a number of things to get the iframe working. I'm not sure if the problem you're having is the same issue but I'm unable to add my files here for your review. I'll post some files in this message that had a working iframe which hopefully you can use to help with your issue.

Thanks, Thomas.

***index.html***

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
<script src="phonegap.js"></script>
<script src="bridge.js"></script>
</head>
<body style="margin: 0px;">
<div style="height: 100%">
<iframe onload="Bridge.init(this);" src="http://192.168.1.67:8080/solutions/nphsMedMobile/index.html?f=frmResponsiveDiary" height="100%" width="100%" frameborder="0"></iframe>
</div>
</body>
</html>

***config.xml***

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.cameratest.mobile"
versionCode = "1.0.0"
version = "1.0.0">



<name>Nephos Med Mobile</name>
<description>Mobile app</description>
<author href="" email="ts@nephos-solutions.co.uk">Thomas</author>

<platform name="ios" />
<platform name="android" />
<platform name="winphone" />





<icon src="Media/Icons/iOS/Small/Icon-29x29.png" gap:platform="ios" width="29" height="29" />
<icon src="Media/Icons/iOS/Small/Icon-58x58.png" gap:platform="ios" width="58" height="58" />
<icon src="Media/Icons/iOS/Small/Icon-87x87.png" gap:platform="ios" width="87" height="87" />
<icon src="Media/Icons/iOS/Icon-40/Icon-40x40.png" gap:platform="ios" width="40" height="40" />
<icon src="Media/Icons/iOS/Icon-40/Icon-80x80.png" gap:platform="ios" width="80" height="80" />
<icon src="Media/Icons/iOS/Icon-40/Icon-120x120.png" gap:platform="ios" width="120" height="120" />
<icon src="Media/Icons/iOS/Icon-60/Icon-120x120.png" gap:platform="ios" width="120" height="120" />
<icon src="Media/Icons/iOS/Icon-60/Icon-180x180.png" gap:platform="ios" width="180" height="180" />
<icon src="Media/Icons/iOS/Icon-76/Icon-76x76.png" gap:platform="ios" width="76" height="76" />
<icon src="Media/Icons/iOS/Icon-76/Icon-152x152.png" gap:platform="ios" width="152" height="152" />
<icon src="Media/Icons/iOS/Icon-120/Icon-120x120.png" gap:platform="ios" width="120" height="120" />



<icon src="Media/Icons/Android/ldpi/Icon-36x36.png" gap:platform="android" gap:density="ldpi"/> 
<icon src="Media/Icons/Android/mdpi/Icon-48x48.png" gap:platform="android" gap:density="mdpi"/> 
<icon src="Media/Icons/Android/hdpi/Icon-72x72.png" gap:platform="android" gap:density="hdpi"/> 
<icon src="Media/Icons/Android/xhdpi/Icon-96x96.png" gap:platform="android" gap:density="xhdpi"/> 
<icon src="Media/Icons/Android/xxhdpi/Icon-144x144.png" gap:platform="android" gap:density="xxhdpi"/> 
<icon src="Media/Icons/Android/xxxhdpi/Icon-192x192.png" gap:platform="android" gap:density="xxxhdpi"/> 





<splash src="splash.png" />





<splash src="Media/Splashes/Android/Splash-480x800/Splash" gap:platform="android" gap:density="hdpi" /> 

<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>

<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashScreenDelay" value="10000" />
<preference name="phonegap-version" value="cli-6.5.0"/>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
<preference name="Orientation" value="portrait"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-windowSoftInputMode" value="adjustResize" />
<preference name="fullscreen" value="false" />
<preference name="loadUrlTimeoutValue" value="700000" />

<plugin name="cordova-plugin-splashscreen" source="npm"/>
<plugin name="cordova-plugin-whitelist" source="npm"/>
<plugin name="cordova-plugin-wkwebview-engine" source="npm"/>
<plugin name="cordova-plugin-camera" source="npm"/>
<plugin name="com.phonegap.plugins.barcodescanner" source="npm"/>

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

Posted: **Thu Feb 01, 2018 8:41 pm**

Hi. Thanks for reply, I will get back to you once I've had a chance to check what you've replied with.

Posted: **Sat Sep 15, 2018 6:10 am**

Hi Thomas,

I did try the example index.html and config.xml but no luck, I am getting following error,

"Error while executing client side code. Please see browser console for more info. Error: ReferenceError: Bridge is not defined"

What might be the issue here please

Posted: **Mon Sep 17, 2018 1:35 am**

Hi All,

Any update on this, please.

Posted: **Mon Sep 17, 2018 8:29 am**

The error sounds like you have this on your iframe

Code: Select all: onload="Bridge.init(this);"

but the "Bridge" object does not exist. Note that in the examples above, two scripts are loaded

Code: Select all: <script src="phonegap.js"></script> <script src="bridge.js"></script>

The latter is responsible for attaching that Bridge object.

Those two scripts come from a project on github (https://github.com/Servoy/svyPhonegap) that we have created to ease the integration of phonegap and NG Client. Many times, people do not only want to simply run their application inside PhoneGap, but also make use of the different APIs that are offered or can be added to a PhoneGap solution.

So in short: to simply run your application, remove the onload call you most likely copied. To further integrate with PhoneGap, check out https://github.com/Servoy/svyPhonegap

Posted: **Mon Sep 17, 2018 3:49 pm**

Hi Patrick,

Thanks for the reply , I have checked "index.html" and there is no "onLoad" function at iFrame, following is the index.html, did I miss anything ?

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./medias/svyMobile/medias/mobile_base.css" />
<title>SERVOY MOBILE</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/bridge.js"></script>
<script type="text/javascript" src="js/plugins/LaunchMyApp.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</head>

<body>
<nav class="navbar navbar-inverse bg-faded" id="navbar">
<a class="navbar-brand" href="#" style='padding:10px 15px 10px 15px;'>
<img src="./medias/svyMobile/medias/servoy.png" width="30" height="30" class="align-top" alt="">
</a>
</nav>
<iframe id="iframe" src='http://xxx.xxx.xxx.xx:xxxx/sample/solutions/sample/index.html?f=sampleMainFrm' style="width:100vw;height:100vh; display: none; border: none;"></iframe>
<div id="base" style="display: none; color:white; text-align: center; position: fixed;top: 50%;left: 50%; transform: translate(-50%, -50%);">
<span style="font-size: 50px;"><u>Offline</u></span>
<span style="font-size: 15px;">Please check your connection...</span>
</div>
</body>

</html>

Posted: **Mon Sep 17, 2018 4:55 pm**

In the examples posted above there was an onload=... Then I guess it something that happens in the scripts you load.

Posted: **Mon Sep 17, 2018 5:07 pm**

Hi Patrick,

No that's not case, can you share if I miss anything at the attached index.html ?

Posted: **Mon Sep 17, 2018 5:23 pm**

Something calls

Code: Select all: Bridge.xxx

Maybe your onOpen script? And that is not there, although it seems you try to load it here

Code: Select all: <script type="text/javascript" src="js/bridge.js"></script>

Do you have a media folder called "js" with a bridge.js in it?

Servoy Forum

Linking a Servoy NG client solution in an iframe

Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe

Re: Linking a Servoy NG client solution in an iframe