Linking a Servoy NG client solution in an iframe

Questions and answers on developing, deploying and using plugins and JavaBeans

Linking a Servoy NG client solution in an iframe

Postby Thomas.shuttleworth » 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.
Thomas.shuttleworth
 
Posts: 24
Joined: Wed Apr 05, 2017 5:08 pm

Re: Linking a Servoy NG client solution in an iframe

Postby ProRM » 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,
User avatar
ProRM
 
Posts: 56
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: Linking a Servoy NG client solution in an iframe

Postby Thomas.shuttleworth » 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
Thomas.shuttleworth
 
Posts: 24
Joined: Wed Apr 05, 2017 5:08 pm

Re: Linking a Servoy NG client solution in an iframe

Postby Thomas.shuttleworth » 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.
Thomas.shuttleworth
 
Posts: 24
Joined: Wed Apr 05, 2017 5:08 pm

Re: Linking a Servoy NG client solution in an iframe

Postby ProRM » Thu Jun 15, 2017 10:53 pm

great!
User avatar
ProRM
 
Posts: 56
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: Linking a Servoy NG client solution in an iframe

Postby rafig » 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
Servoy Certified Developer
Image
rafig
 
Posts: 505
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Linking a Servoy NG client solution in an iframe

Postby Thomas.shuttleworth » 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">

<!-- versionCode is optional and Android only -->

<name>Nephos Med Mobile</name>
<description>Mobile app</description>
<author href="" email="[email protected]">Thomas</author>

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

<!-- App Icons -->

<!-- iOS -->

<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" />

<!-- Android -->

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

<!-- App Splashes -->

<!-- Default -->

<splash src="splash.png" />

<!-- iOS -->

<!-- Android -->

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

<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>
Thomas.shuttleworth
 
Posts: 24
Joined: Wed Apr 05, 2017 5:08 pm

Re: Linking a Servoy NG client solution in an iframe

Postby rafig » 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.
Servoy Certified Developer
Image
rafig
 
Posts: 505
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Linking a Servoy NG client solution in an iframe

Postby chaitanyas » 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
chaitanyas
 
Posts: 94
Joined: Tue Jul 26, 2011 8:28 am

Re: Linking a Servoy NG client solution in an iframe

Postby chaitanyas » Mon Sep 17, 2018 1:35 am

Hi All,

Any update on this, please.
chaitanyas
 
Posts: 94
Joined: Tue Jul 26, 2011 8:28 am

Re: Linking a Servoy NG client solution in an iframe

Postby patrick » 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
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3655
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Linking a Servoy NG client solution in an iframe

Postby chaitanyas » 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>

chaitanyas
 
Posts: 94
Joined: Tue Jul 26, 2011 8:28 am

Re: Linking a Servoy NG client solution in an iframe

Postby patrick » 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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3655
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Linking a Servoy NG client solution in an iframe

Postby chaitanyas » 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 ?
chaitanyas
 
Posts: 94
Joined: Tue Jul 26, 2011 8:28 am

Re: Linking a Servoy NG client solution in an iframe

Postby patrick » 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?
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3655
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Next

Return to Plugins and Beans

Who is online

Users browsing this forum: No registered users and 1 guest