This question is a bit vague as I am not sure how to phrase it. I fully accept this can be voted down but if anyone has an insight it would be most helpful.
I am trying to determine whether it is my web app code that is at fault or the inherit nature of Mobile Web apps (especially on Android devices).
I have this web app.
It has been designed using asp.net, C#, JavaScript and Jquery.
I have 1 page with 2 divs in it.
The 1st div shows a login page (i.e. Username and Password).
When logged in this div is hidden and the 2nd div is shown.
This 2nd div 'starts' a timer that downloads an image from my server every now and again.
I use the SetTimeout function and I recall it if there is no image ready to download or/and the image.src has finished its onload event.
I can look at this web app on my phone for hours and it will always work.
Then, I logoff (i.e. no timer is active) and the 1st div is shown.
I go to bed.
I wake up.
I go to my Android browser.
The web app shows the login div
I login
All OK.
{so the call to my server works}
But no images are downloaded.
I have put a visual counter in to show whether my timer is working.
It is not.
I refresh the page and relogin. Everything works again.
Now, I can accept if it is my code but is it the way Android handles web apps?
Any suggestions would be grand.
I can post this code if anyone needs to see it,. But it is very simple and I did not want to obscure my question.
CODE#
In DIV 1
<script type="text/javascript">
jQuery(function ($) {
$("#btnGoToLogin").click(function () {
function StartRefresh() {
try {
Start();
//display div 2
//hide div 1
}
catch (err) {
$("#divVersion").html("1# " + err);
}
}
});
});
</script>
In DIV 2
function Start() {
try {
if (timer4x4) window.clearTimeout(timer4x4);
timer4x4 = window.setTimeout(swapImages4x4, 100);
}
catch (err) {
$("#divVersion").html("1# " + err);
}
}
function Stop() {
if (timer4x4) window.clearTimeout(timer4x4);
}
function setImageSrc1x1(src) {
live1x4.src = src;
Start();
}
function swapImages4x4() {
try {
serverImage1x4.onload = function () {
setImageSrc1x1(serverImage1x4.src);
};
serverImage1x4.onerror = function () {
Start();
};
GetImageStatus();
}
catch (err) {
$("#divVersion").html("2# " + err);
}
}
function GetImageStatus() {
serverImage1x4.src = url + '/Mobile/LiveXP.ashx?Alias=' + Alias + '&camIndex=' + camIndex + '&Guid=' + createGuid();
}
jQuery(function ($) {
$("#btnExitLogin").click(function () {
function ExitDiv2() {
try {
Stop();
//display div 1
//hide div 2
}
catch (err) {
$("#divVersion").html("1# " + err);
}
}
});
});
Without the code it's difficult to say where is the problem, but try this 3 approaches:
1) Is this happening if you log off, than log back in again, without leaving the activity?
If so, you should dig in your javascript more
2) Is this happening if you log off, put app in background, than bring it to foreground, log back in? If so look at on pause on resume events
3) It's only happening if you log out, put the app in background leave it for a longer period, I will look more in the onStop
E
Well, I guess you stopped the timeout when you logged out.
So when you login again, you start it again.
But something might fail with the start after the next login.
I guess it's definitively your Javascript code.
(...) but is it the way Android handles web apps?
I guess the automatic lock screen is one thing, that could cause timers to pause / stop.You didn't use your device over the night, so I guess it locked itself. That might cause the browser to stop draining your battery.
E.g. when your screen locks, you won't be able to watch Youtube videos.
That's what I know about it. Hope that helped a bit.
Related
I am trying to create a website https://fone-kase-plus.myshopify.com/ that will detect what device model it's being accessed from (for example GALAXY A40) so it will immediately redirect the user to a corresponding page.
It seems to be working, but it will reload the page multiple times after redirecting. If I try to redirect it to non-shopify page (eg stackoverflow.com) this problem doesn't occur.
function deviceAPIcallback(result){
if(result.deviceName == "desktop"){
window.location.href = "https://fone-kase-plus.myshopify.com/pages/galaxy-a40";
}
else{
alert(result.deviceName);
}
}
Can you please tell me what the problem can be or at least how I can detect it by dev tools?
Thanks
When I go to the site from both my macOS laptop and my iPhone I only get the alert aspect of your function. What does result.deviceName return? You might need to add a third '=' to your first 'if' statement.
function deviceAPIcallback(result) {
if(result.deviceName === "desktop") {
window.location.href = 'https...';
} else {
alert(result.deviceName);
}
}
I've been running into an issue while trying to update a script for a client. I'm still somewhat new to the industry, so I wanted to make sure I'm not missing anything.
I am attempting to edit a web page which displays a number of PDFs in canvas views. The issue arises when a user tries to switch which PDF they're viewing. The function that retrieves the PDFs has a setTimeout in place to get the content to reload every minute, as the PDFs themselves are updated with new data every 5 minutes and the users need to be able to monitor the data as it comes in. However, when switching from one PDF canvas to the next, I found that the PDF doesn't update. The only PDF that reloads and updates is the one whose canvas has been open. This is what I'm trying to change. I want the PDF display to update not only every minute, but also whenever a user switches which PDF they're viewing.
What this told me is that I need to add something that loads the PDFs again when switching canvas views. First, I tried taking the function that updates the PDFs and calling it whenever the user switches the canvas view. This seemed to work, but the issue ended up changing. The page would begin to reload more and more often the more times you would change canvas views - I'd assume because the setTimeout within the function had then been called more than once.
My second attempt was to make a new function that simply didn't have the setTimeout code and call that instead. I must have done something wrong however, because after calling that function in the code, none of the PDFs wanted to load at all.
I'll paste the code for the functions I need to work with below. Any help is appreciated, especially if I'm just missing something obvious. If you need any other details, let me know. Thank you to anybody who offers help.
function getReport(reportName, frameId) {
var params = {
report: reportName
};
$.post('/getReport.php', params, function(data){
if (data == "") {
window.location.href="/login.php";
return;
}
if (useBrowserViewer) {
$("#pdfFrame" + frameId).attr("data", "data:application/pdf;base64," + data);
} else {
displayPdf(data, document.getElementById("canvas" + frameId), 1);
if (frameId == "4") {
displayPdf(data, document.getElementById("canvas4Page2"), 2);
}
}
setTimeout(function() {
getReport(reportName, frameId);
}, 60*1000);
}).fail(function() {
console.log("Report not returned.");
setTimeout(function() {
getReport(reportName, frameId);
}, 60*1000);
});
}
function showReport(frameIdNum) {
if (useBrowserViewer) {
$(".pdfFrame").hide();
$("#pdfFrame" + frameIdNum).show();
} else {
$(".pdfCanvas").hide();
document.getElementById("canvas" + frameIdNum).style.display = 'block';
if (frameIdNum == "4") {
document.getElementById("canvas4Page2").style.display = 'block';
}
}
$(".link").removeClass("active");
$("#link" + frameIdNum).addClass("active");
}
I am trying to create a chrome extension that, with a click of a button opens several webpages that I often visit. Currently when clicked it opens 1-4 of the 4 webpages I want it to, often stopping prematurely. The code is pretty simple, so I figured it is a processing issue. For this reason I want to introduce some delay. I've been told not to use sleep() from the research I have found so I am trying to implement code that makes my For loop wait until the page has loaded before proceeding. Here is the code:
function OpenInNewTabWinBrowser(url) {
var win = window.open(url, '_blank');
//win.focus();
}
function CheckLoading() {
return document.readyState === "interactive";
}
var websites = ['https://reddit.com', 'https://xkcd.com', 'http://poorlydrawnlines.com', 'https://explosm.net'];
var MoveAlong;
for (var i = websites.length - 1; i >= 0; i--) {
OpenInNewTabWinBrowser(websites[i]);
console.log("Just opened a window!");
MoveAlong = CheckLoading();
console.log("Just checked if it was loading!");
/*while (MoveAlong == false) {
console.log("Just realized it hasn't loaded all the way!");
sleep(10);
console.log("Just woke up!");
MoveAlong = CheckLoading();
console.log("Just double checked if it had loaded!")
}
console.log("Just broke out of the while loop!")*/
}
console.log("Just finished doing everything you asked master!")
When I run the code as is I don't always open every page. The commented section is what I have tried to utilize as a pausing function but when that code is un-commented it only opens up one page and never anymore. I have also tried supplying console.log comments for debugging but when I inspect popup if even one window opens up the console closes itself and I am left with no means of reading where the code went wrong.
I have also tried this loop and function to check for a loaded page and then unpause. This code replaced the For loop from the snippet above. It also didn't work correctly.
var i = websites.length - 1;
do {
MoveAlong = false;
OpenInNewTabWinBrowser(websites[i]);
i--;
window.onload = function() {
MoveAlong = true;
}
}
while (MoveAlong == true && i >= 0);
Any help is much appreciated. On how to properly debug, on how to detect if the website is loading, on how to make this extension work. I have been a partial lurker for a while but now I am trying to actively code every day. This is my first post and hopefully it will be the beginning to a fun hobby. Thank you again.
I'm rather new to Javascript and Crossrider. I believe what I'm trying to do is a rather simple thing - maybe I missed something here?
I am writing an extension that automatically logs you into Dropbox and at a later time will log you out. I can log the user into Dropbox automatically, but now my client wants me to automatically log those people out of dropbox by FINDING the open Dropbox windows and logging each one of them out.
He says he's seen it and it's possible.
Basically what I want is some code that allows me to get the active tabs, and set the location.href of those tabs. Or even close them. So far this is what I got:
//background.js:
appAPI.ready(function($) {
// Initiate background timer
backgroundTimer();
// Function to run backround task every minute
function backgroundTimer() {
if (appAPI.db.get('logout') == true)
{
// retrieves the array of tabs
appAPI.tabs.getAllTabs(function(allTabInfo)
{
// loop through tabs
for (var i=0; i<allTabInfo.length; i++)
{
//is this dropbox?
if (allTabInfo[i].tabUrl.indexOf('www.dropbox.com')!=-1)
{
appAPI.tabs.setActive(allTabInfo[i].tabId);
//gives me something like chrome-extension://...
window.alert(window.location.href);
//code below doesn't work
//window.location.href = 'https://www.dropbox.com/logout';
}
}
appAPI.db.set('logout',false);
});
window.alert('logged out.');
}
setTimeout(function() {
backgroundTimer();
}, 10 * 1000);
}
});
When I do appAPI.tabs.setActive(allTabInfo[i].tabId); and then window.alert(window.location.href); I get as address "chrome-extension://xxx" - which I believe is the address of my extension, which is totally not what I need, but rather the URL of the active window! More than that, I need to navigate the current window to the log out page... or at least refresh it. Can anybody help, please?
-Rowan R. J.
P.S.
Earlier I tried saving the window reference of the dropbox URL I opened, but I couldn't save the window reference into the appAPI.db, so I changed technique. Help!
In general, your use of the Crossrider APIs looks good.
The issue here is that you are trying to use window.location.href to get the address of the active tab. However, in the background scope, the window object relates to the background page/tab and and not the active tab; hence you receive the URL of the background page. [Note: Scopes can't directly interactive with each others objects]
Since your objective is to change/close the URL of the active dropbox tab, you can achieve this using messaging between scopes. So, in your example you can send a message from the background scope to the extension page scope with the request to logout. For example (and I've taken the liberty to simplify the code):
background.js:
appAPI.ready(function($) {
appAPI.setInterval(function() {
if (appAPI.db.get('logout')) {
appAPI.tabs.getAllTabs(function(allTabInfo) {
for (var i=0; i<allTabInfo.length; i++) {
if (allTabInfo[i].tabUrl.indexOf('www.dropbox.com')!=-1) {
// Send a message to all tabs using tabId as an identifier
appAPI.message.toAllTabs({
action: 'logout',
tabId: allTabInfo[i].tabId
});
}
}
appAPI.db.set('logout',false);
});
}
}, 10 * 1000);
});
extension.js:
appAPI.ready(function($) {
// Listen for messsages
appAPI.message.addListener(function(msg) {
// Logout if the tab ids match
if (msg.action === 'logout' && msg.tabId === appAPI.getTabId()) {
// change URL or close code
}
});
});
Disclaimer: I am a Crossrider employee
I'm building out an audio media recorder/player with PhoneGap. It's all working beautifully, but I've hit a wrinkle I can't seem to iron.
my_media.play(); does indeed play the media w/o error in my Eclipse or XCode consoles which is why the alert that is showing a -1 is puzzling. I expect my_media.getDuration(); to return the duration of the file I'm attempting to play.
My try/catch block isn't throwing an error, I'm quite puzzled on this one. Here's the PhoneGap documentation on Media.getDuration().
function playAudio() {
$('#btnStopRecording').removeClass('ui-disabled');
$('#btnPlayMessage, #btnStartStopRecording, #btnDeleteMessage, #btnAcceptUpload').addClass('ui-disabled');
my_media = new Media(fullRecordPath,
// success callback
function () {
$('#btnPlayMessage, #btnStartStopRecording, #btnDeleteMessage, #btnAcceptUpload').removeClass('ui-disabled');
$('#btnStopRecording').addClass('ui-disabled');
},
// error callback
function (err) {
console.log("attempting to play fullRecordPath = "+fullRecordPath);
console.log("playAudio():Audio Error: " + err.code);
}
);
var thisDuration;
try{
thisDuration = my_media.getDuration();
} catch (err) {
console.log("attempting to get duration error code "+err.code);
console.log("attempting to get duration error message "+err.message);
}
alert("we're about play a file of this duration "+thisDuration);
my_media.play();
// stop playback when the stop button is tapped
$('#btnStopRecording').off('tap').on('tap',function()
{
my_media.stop();
$('#btnPlayMessage, #btnStartStopRecording, #btnDeleteMessage, #btnAcceptUpload').removeClass('ui-disabled');
$('#btnStopRecording').addClass('ui-disabled');
});
// if the user leaves the page, stop playback
$('#pageRecordMessage').live('pagehide', function()
{
my_media.stop();
$('#btnPlayMessage, #btnStartStopRecording, #btnDeleteMessage, #btnAcceptUpload').removeClass('ui-disabled');
$('#btnStopRecording').addClass('ui-disabled');
});
}
The metadata for the media in question has not been loaded when you call my_media.getDuration(). In the documentation you referenced in your question the example code puts the getDuration call into an interval:
var timerDur = setInterval(function() {
counter = counter + 100;
if (counter > 2000) {
clearInterval(timerDur);
}
var dur = my_media.getDuration();
if (dur > 0) {
clearInterval(timerDur);
document.getElementById('audio_duration').innerHTML = (dur) + " sec";
}
}, 100);
I would recommend doing something similar.
This solution works for me. Basically, play and immediately stop. It doesn't seem to take any time, seems like a decent workaround.
media.play();
media.stop();
var length = media.getDuration();
This question is too old. But it is still relevant because many might have been facing this same problem.
Whenever nothing works I just do one thing, upgrade or downgrade the version. In this case I solved my problem by installing following version.
cordova plugin add cordova-plugin-media#1.0.1
I also faced similar problem in cordova for iOS. I was successfully able to record, play and stop audio but unable to get current position and total duration for audio file. So I added my_media.release() just after I was done finishing recording audio i.e. after my_media.stopRecord() and it worked like a charm. Earlier I was getting -1 for getDuration() and 0 for getCurrentPosition().
Hope it helps someone.