Chrome inactive tab not executing setInterval - javascript

I like listening music with a Chrome tab on Youtube while I'm working, but every hour the music stops and a message "Are you still there?" is displayed on it.
Yes, I'm still there, like everyday, 7 times a day :)
So I installed a Chrome extension called "Custom Stylesheet & Script" to run this simple JavaScript stuff:
setInterval(function(){
let overlay = document.querySelector('iron-overlay-backdrop');
if(overlay) overlay.click();
}, 1000);
This works great, but only if I am on the YouTube tab. If I'm working on another one the music eventually stops and I have to click on the YT tab for this JavaScript to run (so not really a win after all).
I found some posts mentioning that setInterval in inactive tabs have a low priority and will only trigger once or twice a second, in my case they don't trigger at all.
Thanks for any hint on what to look at :)

After some tests, I found that the click on the "Ok" button to confirm was disabled by YouTube if the chrome tab isn't active, the setInterval was perfectly working after all.
If anyone is interested, I tried the MutationObserver method suggested by wOxxOm, and instead of clicking the confirmation button I just reload the page.
Here is the code I'm using now:
if(-1 !== window.location.host.indexOf('youtube')) {
document.addEventListener('DOMContentLoaded', (event) => {
let popupContainer = document.querySelector('ytd-popup-container');
let observer = new MutationObserver(function(mutationsList) {
let confirmButton = popupContainer.querySelector('.yt-confirm-dialog-renderer paper-button');
if(confirmButton){
// confirmButton.click();
document.location.reload(true);
}
});
observer.observe(popupContainer, {childList: true});
});
}

Related

iOS not loading target click URL bc of hover?

I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.

Playing sound from INACTIVE browser tab

I have a control panel for restaurants and it plays an alert sound when an order is given. The problem is that when the control panel tab is not the active tab in Chrome (it's also same for Firefox) the alert sound doesn't play. After clicking the tab it plays the sound.
I see some sites (Facebook Chat, Cloudstats.me server alert, ...) play sound even if they are in inactive tab, so what is the workaround for this problem?
Had a similar thing happen to me as well, we were trying to play a marketclock when the stock market opened and closed for the day. The issue we had was we tried to load the mp3 then play it when the condition is met. So originally I had.
var bell;
// Update the clock, countdown, and tooltips as needed.
function updateClock() {
service.getMarketDate(function(data) {
if (data.soundMarketBell) {
if (!bell) {
bell = new Audio('/sounds/marketclock.mp3');
}
bell.play();
}
});
}
var intervalId = $interval(updateClock, 1000);
By moving the resource loading to happen on page load and then just calling the Audio.play it fixed the issue
var bell = new Audio('/sounds/marketclock.mp3');
// Update the clock, countdown, and tooltips as needed.
function updateClock() {
service.getMarketDate(function(data) {
if (data.soundMarketBell) {
bell.play();
}
});
}
// check for a time update every second
// to balance accuracy with performance
var intervalId = $interval(updateClock, 1000)
Browsers restrict loading resources when a tab is inactive
There's also the possibility that the audio wouldn't play because of browsers Autoplay policy.
For example, in Chrome the audio won't play until the user actively click the web page.
you may find the full list here:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

iOS Safari Mobile doesn't trigger pageshow firing only once

The iOS Safari doesnt't seem to trigger pageshow event in the following situation.
Lets say I have 3 pages
Page A : (has some code code on pageshow event)
Page B
Page C
User navigates from A -> B. Presses the back button. (pageshow triggers fine)
User then navigates to another page could be Page B or Page C. Then presses the back button again. (pageshow doesn't trigger)
On the contrary if the user minimizes and maximizes the window again or switches to another window and back (by pressing the middle button on iPhone) the pageshow event is triggered again.
Everything seems to work fine on Android
window.onpageshow = function(e) {
alert('hello');
}
Did anyone else face it? I spent hours on this thing and couldn't think of a workaround.
Any help would be greatly appreciated.
Hack : This is what worked for me
var myCustomEvent = (navigator.userAgent.match('iPhone') != null) ? 'popstate' : 'pageshow';
$(window).on(myCustomEvent, function(e) {
...
}
For some reason popstate triggers everytime when page state changes in iOS but not in Android.
Try using:
window.onpageshow = function(event) {
if (!event.persisted) {
alert("hello");
}
};
Persisted is false on initial page load, so you can check against it, and if it false, it is your first page load.
The popstate event doesn't seem to work any more, at least for me. I worked out some third-party script on my page was breaking this, but wasn't able to work out which one. I came up with this hack:
addEventListener('pageshow', () => {
history.replaceState({}, document.title, window.location.pathname);
// called on initial load and first back
});
addEventListener('popstate', () => {
// called on all back events
});

How can I tell if iPhone is returning from background in javascript?

I know that the iPhone stops javascript from running when an app is sent to the background (ie pressing the home button while the app is running), but I would like to be able to detect if this has happened when the javascript starts up again when the app is reactivated.
One solution I've been trying is to have an iterator constantly running to "check in" and then running a check against that to tell if the app has gone to background.
var lastCheckinTime = new Date().getTime();
function checkin(){
lastCheckinTime = new Date().getTime();
}
setIterator( checkin, 1000 );
// Later, some code that needs to know if iphone went to background
var now = new Date().getTime();
if( (now - lastCheckinTime) > 1100 ) {
// run sent to background code
Is there a better way to do this? The problem I've found with this method is that it doesn't work if the user quickly closes and reopens the app, but I haven't figured out a better way of detecting this yet.
You can use the 'pageshow' event. Visit this page on your phone, http://jsfiddle.net/vbuDh/
window.addEventListener('pageshow', function(ev){
alert('dasd');
},false);​
This will fire anytime the tab gains focus, or mobile Safari is reactivated on this page.

In JavaScript, what is event.isTrigger?

I came across this in some JS code I was working on:
if ( typeof( e.isTrigger ) == 'undefined' ) {
// do some stuff
}
This seems to be part of jQuery. As far as I can see it tells you if an event originated with the user or automatically.
Is this right? And given that it's not documented, is there a way of finding such things out without going behind the curtain of the jQuery API?
In jQuery 1.7.2 (unminified) line 3148 contains event.isTrigger = true; nested within the trigger function. So yes, you are correct - this is only flagged when you use .trigger() and is used internally to determine how to handle events.
If you look at jQuery github project, inside trigger.js file line 49 (link here) you can find how isTrigger gets calculated.
If you add a trigger in your JavaScript and debug through, You can see how the breakpoint reaches this codeline (checked in jQuery-2.1.3.js for this SO question)
Modern browsers fight against popup windows opened by automated scripts, not real users clicks. If you don't mind promptly opening and closing a window for a real user click and showing a blocked popup window warning for an automated click then you may use this way:
button.onclick = (ev) => {
// Window will be shortly shown and closed for a real user click.
// For automated clicks a blocked popup warning will be shown.
const w = window.open();
if (w) {
w.close();
console.log('Real user clicked the button.');
return;
}
console.log('Automated click detected.');
};

Categories