Good day! I am developing a simple mobile app using jQuery Mobile with InAppBrowser plugin on IntelXDK. The purpose of the InAppBrowser is to let users view external web pages within the app. On IntelXDK emulator, the browser closes when I click on "Return to App" button and then it returns to the app. However, I encountered a problem on an Android build when I clicked on the "Done" button I received the message:
Webpage not available
The webpage at file:///android_asset/www/[object%20Event] might be temporarily down...
I have used the following so users can click and view external web pages:
Opening links in external device browser with Cordova/jQuery-mobile
I have modified the above to be used on my app:
$(document).on('click', '.link', function (e) {
var elem = $(this);
var url = elem.attr('href');
if (url.indexOf('http://') !== -1) {
e.preventDefault();
document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReady(url);
//return false;
}
});
function onDeviceReady(url) {
var ref = window.open(url, '_blank', 'location=yes');
}
Thank you for your time and help. I really appreciate it.
The reason why it was displaying an error message because the test file was calling another onDeviceReady function. Problem solved!
Related
I'm creating a simple webview app using nativescript-vue where there is nothing else in the app except the webview that loads a website fullscreen.
On iOS it works great, I can log in to the website turn the app off and on and I'm still logged in.
On Android, the cookies are not saved and you have to log in again every time you turn the app off.
Any way I can enable cookies in the webview for Android?
I couldn't make it work with cookies, so I had to switch and use localstorage as a backup for saving tokens instead of cookies.
Here is how my final version looks:
<template>
<Page>
<WebView #loadStarted="onLoadStarted"
#loaded="onWebViewLoaded"
src="https://yoururl.com/"
/>
</Page>
</template>
<script>
import { isAndroid } from "tns-core-modules/platform"
export default {
methods: {
onLoadStarted (webargs) {
if (isAndroid) {
const webView = webargs.object;
webView.android.getSettings().setDomStorageEnabled(true) // This will enable local storage
}
},
onWebViewLoaded(webargs) { // I use this only to disable the default zoom buttons
if (isAndroid) {
const webView = webargs.object;
webView.android.getSettings().setDisplayZoomControls(false)
webView.android.getSettings().setBuiltInZoomControls(false)
}
},
}
};
</script>
Apparently, you should be able to enable cookies doing this (at least for newer SDK users):
webView.on(WebView.loadStartedEvent, (args) => {
webView.android.getSettings().setAcceptThirdPartyCookies(webView, true)
});
But that didn't work as expected as it seemed like sometimes it would save cookies and sometimes it won't or sometimes it would remove cookies (when you log out) and sometimes not.
I hope this info helps someone as it sure seems there is little to none info about this especially if you aren't much familiar with pure Java Android development.
This code should work
const webView = webargs.object;
if (android.os.Build.VERSION.SDK_INT >= 21) {
android.webkit.CookieManager.getInstance().setAcceptThirdPartyCookies(webView.android, true);
}
Here is my situation:
User request an email of forgot password.
User use their Android/iPhone to open email and tap on the link inside the email
When the link is tapped (clicked), it'll call the Ionic app.
I spend the whole morning to research and found this solution: using a plugin of Cordova named Custom-URL-scheme.
I also found out a tutorial from sysgears that I need to add this code into my app.js file:
.run(['$state', '$window',
function($state, $window) {
$window.addEventListener('LaunchUrl', function(event) {
// gets page name from url
var page =/.*:[/]{2}([^?]*)[?]?(.*)/.exec(event.detail.url)[1];
// redirects to page specified in url
$state.go('tab.'+ page, {});
});
}
]);
function handleOpenURL(url) {
setTimeout( function() {
var event = new CustomEvent('LaunchUrl', {detail: {'url': url}});
window.dispatchEvent(event);
}, 0);
}
I've done everything, however it does not work. I tried to type my URL_SCHEME (http://myapp://) into the Chrome browser in Android phone but Chrome just display an error message:
This webpage is not available. ERR_NAME_NOT_RESOLVED.
Please help me. Thanks.
Try to remove the "http://" from your sheme, href and browser
If still not working, can you precise your cordova version, and the plugin version you use. Did you install the plugin with the sheme in --variable URL_SCHEME=myapp
Also, note its "SHEME", not SHEMA
I am working on Cordova hybrid mobile app currently am doing in android app it runs fine now when i make same app for window phone it is not perform any functionality.
for make WP8 I follow this link after that i copy my all file of www folder to new generated www in Visual Studio project.
But when i ran app it just shows its first page only and not performing any functionality.
So what steps did i miss ?
On the click of button I call following function
$('#contactBackupBtn').on('click',function(){
$('#p2').append("Going to be backup");
sm_sync.backupAllTheContacts(function(){
$('#p4').append("After Contact Backup Function Finished ");
});
});
From above function it calls the following one
backupAllTheContacts:function(callback) {
$('#p3').append("IN backupAllTheContacts");
navigator.contacts.find(["*"], function(contacts) {
$('#p3').append("IN Contact Success");
callback();
}, sm_sync.onError, {"multiple": true});
}
onError:function(error) {
$('#p1').empty();
$('#p1').append(error.code);
$('#p1').append(error.message);
}
When i execute it, it shows this message IN backupAllTheContacts and ths Going to be backup but not showing any success or error messages. what should i do to make it run.
(This is a small part of my app it is runnng perfact in Android Emulator but not n windows
I need help i am stuck here)
use console.log is not support in windows phone so use this and use localStorage like this. try to run on deviceready
document.addEventListener("deviceready", function () {
/* This is for Console.log support in WP */
if (typeof window.console == "undefined") {
window.console = {
log: function (str) {
window.external.Notify(str);
}
};
}
var key0;
/* manage localstorage this way */
if (typeof (window.localStorage) !== "undefined") {
localStorage.setItem('lastname', "Smith");
localStorage.firstname = "One";
if (localStorage.getItem('objectKey1') != null || localStorage.getItem('objectKey1') != undefined) {
key0 = window.localStorage.getItem('objectKey1');
}
}
},false);
When i build my WP8 app i ran into somewhat an issue same as this. it's because of the jQuery i used. Then i updated my jQuery to the latest and its all started working fine.
Please check the jQuery documentation and the version you are using. Or you just put up your code in here so that we can have a closer look.
"But when i ran app it just shows its first page only and not performing any functionality.
So what steps did i miss ?"
Without the code how can we say what steps did you missed ???
Any suggestions on why I'm not getting events?
I'm opening the browser after deviceready:
document.addEventListener('deviceready', app.login, false);
I register the event listener, the login function below is called as expected, the foobar page opens, but I never get the "loadstart" (or any other) callbacks that I register for:
login: function () {
console.log("login");
var authorize_url = "foobar";
var appInBrowser = window.open(authorize_url, '_blank', 'location=yes');
appInBrowser.addEventListener('loadstart', function(event) { console.log('loadstart'); });
}
As far as I can tell I'm following the Cordova docs example. Thanks.
Solution: Don't forget to manually install the plugin. Without the plug-in the browser will still show up, but events won't fire:
Use the command line interface:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
I am building a phonegap based mobileweb application which is built almost completely with jquerymobile.
In couple of pages, there are links to external sites and the client wants to show a popup asking if the user is willing to leave the app and go to the external site. Client also asked that the application shall exit if the user chooses to follow the link.
Here is my JS:
if (typeof CORP == "undefined" || !CORP) {
var CORP = {};
}
(function() {
CORP.mk = {
var mobile = false;
init: function() {
$("[data-role='page']").on("pagebeforeshow", CORP.mk.setHandlers);
},
onDeviceReady: function () {
CORP.mk.mobile = true;
document.addEventListener("pause", CORP.mk.onPause, false);
},
onPause: function () { // Exit the app if it goes to background
navigator.app.exitApp();
},
setHandlers: function () {
if ( CORP.mk.mobile ) {
$("a[rel='external']").click(function (e) {
e.preventDefault();
CORP.mk.externalLink = $(this).attr("href");
alert(CORP.mk.externalLink);
navigator.notification.confirm("You are about to close this mobile app and open your web browser.",
CORP.mk.popupConfirm,
"Close This App?");
});
}
}
};
})():
$(document).bind("pageinit", CORP.mk.init);
document.addEventListener("deviceready", CORP.mk.onDeviceReady, false);
Here is my markup:
<a rel='external' data-ajax='false' href='http://www.google.com'>googly</a>
Problem: I tested this code ignoring CORP.mk.mobile on chrome desktop browser and it works fine. However $(this).attr("href"); always returns '#' for the href in Android or IOS and I cannot launch external application with phonegap. I want to be able to get the actual link and launch external app. I tried many combinations and couldn't find a solution. Appreciate any insights.
Finally found the issue. This is happening due to e.preventDefault(); which is replacing the link. I am surprised that this doesn't happen in desktop browsers..
So, instead of
e.preventDefault();
CORP.mk.externalLink = $(this).attr("href");
I need to do
CORP.mk.externalLink = $(this).attr("href");
e.preventDefault();