i install "inAppBrowser" plugin in my phonegap project by this command line:
cordova plugin add cordova-plugin-inappbrowser
and in the index.html blow code in writen:
<a id="eghdamat_ghabl" href="#" onclick="window.open('http://apache.org', '_blank', 'location=yes'); return false;">click me</a>
but it does't open the link.
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloWorld</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
<icon src="icon.png" />
<splash src="splash.png" />
</widget>
You have to add this line on the config.xml to allow navigation to external urls
<allow-navigation href="*" />
This will allow navigation to any external url.
If you just want to allow the navigation to apache then add this line
<allow-navigation href="https://apache.org" />
Related
No Iframe will not load in this page except fro the youtube video url.
I get the following error code when I use any other iframe url.
Error : net::ERR_BLOCKED_BY_RESPONSE
In the blow example, any URL or ip address fails to load with the same error.
But the embedded youtube video loads and works perfectly.
This is my Index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; 'self' http: style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'https://www.google.com/' ">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div>
<iframe width="360" height="715" src="https://google.com/" target="_parent"/></iframe>
</div>
<div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
This is my Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<access origin="http://192.168.0.106/*" />
<allow-navigation href="http://192.168.0.106/*" />
<allow-intent href="http://192.168.0.106/*" />
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<access origin="*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
<allow-navigation href="*" />
<allow-navigation href="https://192.168.0.106/" />
<allow-navigation href="https://192.168.0.106/*" />
</platform>
</widget>
If you look at the request to http://google.com you can see that it returns a
x-frame-options: SAMEORIGIN
header. This instructs the browser to not load the page if the parent is not on the same domain. YouTube doesn't have it probably because it wants you to be able to embed it's videos.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
I am using the PhoneGap Desktop emulator to test my app that just takes a picture using the device camera. All works well in the PhoneGap app on Android and iOS. I get the prompts before I take a picture asking to allow PhoneGap to have access to the camera. Then, all future camera requests work OK. As I would expect.
However, when I create the native apps, and run them on iOS/Android devices, they no longer prompt me for permission to use the camera, and on iOS it just crashes when I try to open the camera. On Android, it just does nothing when I trigger the camera.
I'm struggling to work out why it works using the PhoneGap App, but doesn't when I run it as a native App? Am I missing something?
I am creating the App structure, adding platforms/plugins etc. using the cordova CLI on my Ubuntu server. I am using the Adobe PhoneGap build servers (v7.0.1) to compile the native Apps. I was only using PhoneGap desktop to test this issue.
iOS device OS version = v11.0.3
Android device OS version = 7.0
My config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mycameraapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My Camera App</name>
<description>
Test App
</description>
<author email="hello#mycameraapp.com" href="http://www.mycameraapp.com">
My Camera App
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="ios" spec="~4.5.3" />
<engine name="android" spec="~6.3.0" />
<plugin name="cordova-plugin-camera" spec="^3.0.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take pictures from within the App" />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="To take pictures from within the App" />
</plugin>
</widget>
The JavaScript that triggers the camera:
function upload_case_image(mode) {
openCamera(mode);
}
function setOptions(srcType) {
var options = {
// Some common settings are 20, 50, and 100
quality: localStorage.getItem('image_quality'), // Image quality is defined in the database
destinationType: Camera.DestinationType.DATA_URL,
// In this app, dynamically set the picture source, Camera or photo gallery
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: false,
correctOrientation: true //Corrects Android orientation quirks
}
return options;
}
function openCamera(mode) {
var srcType = Camera.PictureSourceType.CAMERA;
var options = setOptions(srcType);
navigator.camera.getPicture(function cameraSuccess(imageUri) {
upload_image(mode, imageUri);
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
My index.html is in the normal place within www, and references the corodva.js file:
<!-- Cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
Looks like I've worked out where I was going wrong.
I was using Cordova, rather than the PhoneGap CLI. I installed Node.js on my PC, then installed PhoneGap (npm install -g phonegap#latest).
Then using command prompt I created the App using PhoneGap in Windows, instead of using Cordova on Ubunutu.
When I uploaded it to the Adobe build servers to build the PhoneGap App, it appears to work now.
Makes sense why I would encounter some difficulties.
I'm trying to do something very basic - including an external JS File, but I can't get it to work.
Relevant HTML
<head>
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
</head>
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/dezedan" version="1.0.0" viewmodes="maximized">
<access origin="*" subdomains="true"/>
<access origin="https://openlayers.org/" subdomains="true"/>
<tizen:application id="iFnT8pQIzT.dezedan" package="iFnT8pQIzT" required_version="3.0"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.all"/>
<icon src="icon.png"/>
<name>test</name>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:profile name="wearable"/>
</widget>
things I've tried including in config.xml (unsuccessfully)
<access origin="http://openlayers.org/" subdomains="true"/>
<access origin="https://openlayers.org/en/v4.1.1/build/ol.js" subdomains="true"/>
<access origin="http://openlayers.org/en/v4.1.1/build/ol.js" subdomains="true"/>
As far as I see can I'm doing everything correctly; but obviously I'm missing something! It would be greatly appreciated if anyone could shed some light on what I'm missing.
Use this
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.1.1/ol.js"</script>
Instead of
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
I am going through the ionic tutorial present in
http://ccoenraets.github.io/ionic-tutorial/build-ionic-project.html
and ran the app on browser
ionic serve
and in android using
ionic emulate android
When I run the app as instructed in tutorial, it works well on my chrome browser but when I try to run on emulator, I dont see any data, its just empty screens with menus. I suspect its the problem with whilelist and added
<allow-navigation href="*" />
to my /config.xml file but it still doesn't work, My current config.xml file is
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.conference472350" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>conference</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
</widget>
I am debugging the app in chrome devtools and this is the error I get in console for the app
Failed to load resource: net::ERR_CONNECTION_REFUSED
Interestingly enough, I had the same issue while developing my app.
Have you installed the plugin correctly? You didn't mention if you did.
You need to install the cordova whitelist plugin first. I did this via npm.
I also added all access to resources in my config.xml:
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
Though, that is not recommended. Rather, allow access to the resources you need for the app.
I have the following in my config.xml file:
<preference name="splashscreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="fade-splash-screen-duration" value="5000" />
<preference name="splash-screen-duration" value="5000" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen"/>
<param name="onload" value="true" />
</feature>
and on initializing my app I have the following:
setTimeout(function() {
navigator.splashscreen.hide();
}, 2500);
I've also installed the splash screen plugin using the instructions found here
despite this the splash screen is not delayed and instead a white screen flashes before my app loads. Any help appreciated!
Are you running the app in debug with xcode? Are there any messages output?
I've had this issue before and got a warning saying "The splashscreen image named Default-Portrait was not found"
My splash screen was named something else, so I created another called "Default-Portrait" and added it to the project.
Same goes for the #2x version.