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: 23
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: 50
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: 23
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: 23
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: 50
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: 497
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: 23
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: 497
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK


Return to Plugins and Beans

Who is online

Users browsing this forum: No registered users and 1 guest