Develop Reference

How to open mulitple tabs at once [JavaScript]

I have a button that is purposely designed to open multiple pages at once, it is the main feature of the button.
I tried using:
(1)
urls.forEach(url => {
window.open(url);
});
(2) promises with a delay on them but that did not work either.
(3) multiple a tags and trying to simulate a human click however, that did not work either.
var element = document.createElement("a");
element.href = tempUrl;
element.innerHTML = "temp";
element.id = "tempAtag";
element.target = "_blank";
document.getElementById("dashboardID").appendChild(element);
element = document.getElementById("tempAtag");
var box = element.getBoundingClientRect(),
coordX = box.left + (box.right - box.left) / 2,
coordY = box.top + (box.bottom - box.top) / 2;
var simulateMouseEvent = function (element, eventName, coordX, coordY) {
element.dispatchEvent(
new MouseEvent(eventName, {
view: window,
bubbles: true,
cancelable: true,
clientX: coordX,
clientY: coordY,
//button: 0,
})
);
};
simulateMouseEvent(element, "mousedown", coordX, coordY);
simulateMouseEvent(element, "mouseup", coordX, coordY);
simulateMouseEvent(element, "click", coordX, coordY);
This does work for the first link but I get a warning in the console saying I am trying to open multiple tabs with only one interaction. So it works for one link but not for the rest.
I got the code from Simulate a REAL HUMAN mouse click in pure javascript?
(Note: I did delete my a tags after each iteration and I did test it out, there are no duplicates)
I ran out of ideas. Any ideas?
(I have looked at other solutions and none of what I came across has worked for me)

The following works with a big IF attached.
That if is you need to click the "allow pop-up" warning that will appear in the address bar and continue to allow pop-ups from that site.
You also need to have pop-ups to load in a new tab.
I still think this is a duplicate question with Open a URL in a new tab (and not a new window)
var id = 0, u = ['12','34','56','78'];
function openNextTab(){
if (u[id]){
var x = window.open("https://some.site/id:"+ u[id],"id"+u[id]);
id++;
setTimeout(openNextTab,2000);
}
}
function openTabs(e){
e.stopPropagation();e.preventDefault();
openNextTab();
}
window.onload = function(){
var b = document.getElementById("openLinks");
b.addEventListener("click",openTabs,false);
}

When opening a new link on my site on desktop, it loads the mobile css instead on Chrome

When I am on my site and I use the middle mouse button to load the page in a new tab, it renders the page as if it was on mobile but it is actually on desktop. It only recently started doing this on Chrome after an update.
As the site was done before I joined they did not use media query's like they should have, but actually used a mobile CSS file and a desktop CSS file. Depending on the size of the screen it loads the one it needs.
What I think is happening is that when the page loads in a new tab it loads it in a smaller screen, making my script believe it is on mobile but actually it is on Desktop.
jQuery:
function ResolutionSwitcher(config) {
this.cutoff = document.cutoff || 980;
this.$head = $(document.querySelector("head"));
$.extend(this, config);
}
ResolutionSwitcher.prototype.appendStyle = function(url) {
this.$head.append($("<link/>", {
type: "text/css",
rel: "stylesheet",
href: url
}));
};
ResolutionSwitcher.prototype.removeStyle = function(url) {
this.$head.find("link[href$='" + url + "']").remove();
};
ResolutionSwitcher.prototype.onDesktop = function() {
this.appendStyle("/static/public/css/desktop.v2.css");
this.removeStyle("mobile.css");
DesktopLayout.init();
};
ResolutionSwitcher.prototype.onMobile = function() {
this.appendStyle("/static/public/css/mobile.v2.css");
this.removeStyle("desktop.v2.css");
MobileLayout.init();
};
ResolutionSwitcher.prototype.checkResolution = function() {
var desktop_cutoff = 460;
// if screen is smaller than cutoff (mobile)
if(this.cutoff >= screen.width) {
this.onMobile();
window.site_version = 'strict_mobile';
}
// if screen is bigger than cutoff but window is smaller than cutoff and version is not already mobile
else if(desktop_cutoff >= window.outerWidth && window.site_version != 'mobile') {
this.onMobile();
window.site_version = 'mobile';
// navScrolling('#secondList');
// navScrolling('#thirdList');
navScrolling();
}
// if screen and window are both wider than cutoff and version is not already desktop
else if(desktop_cutoff < window.outerWidth && window.site_version != 'desktop') {
this.onDesktop();
window.site_version = 'desktop';
// navScrolling('#secondList');
// navScrolling('#thirdList');
navScrolling();
}
};
return ResolutionSwitcher;

Why window.open displays a blank screen in a desktop PWA (looks obfuscated)?

On an installed Desktop PWA, since Chrome 73 (on MacOS) when I do a window.open() on a click event with a regular URL, the page loads fully but the window is blank.
It looks obfuscated but there's no overlay tag of anything visible (everything is OK in the devtools's console and network tabs)
I tried with the default Chrome theme, both with Mojave's dark an light mode.
The HTML markup:
<a href="https://jakearchibald.github.io/svgomg/" data-index="2" data-category="svg" rel="noopener noreferrer" class="data-app-button">
<span class="app-name">SVGOMG</span>
</a>
The JavaScript:
// clicks
document.addEventListener(
"click",
function (event) {
if (event.target.closest("[data-app-index]")) {
let appID = event.target.closest("[data-app-index]").getAttribute("data-app-index");
return openApp(appID);
}
},
false
);
// openApp() - a regular window.open()
const openApp = appID => {
event.preventDefault();
// get app options
let appOptions = State.appList[appID];
appOptions.window = appOptions.window || {};
// merge with defaults
let defaultWindow = State.getDefaultWindow;
let options = Object.assign({}, defaultWindow, appOptions.window);
// center window
options.left = screen.width / 2 - options.width / 2;
options.top = screen.height / 2 - options.height / 2;
// translate to window.open args
let args = [];
for (let [key, val] of Object.entries(options)) args.push(`${key}=${val}`);
args = args.join(",");
// open app
return window.open(appOptions.url, appOptions.name, args);
};
Before updating to Chrome 73 everything worked as expected: the window.open() function displayed the web page correctly.
Now the window opens but nothing is visible.

OK I think I found the solution: I noticed that right after the window was open, the parent window (PWA) got the focus back. So it behaved like a pop-under. As pop-under are a really bad/malicious practice I think Chrome is blocking the child popup window.
So I removed the return statement on the event callback:
// I changed this:
return openApp(appID);
// to this:
openApp(appID);
It seems that the parent window do not steal the focus anymore and the popup content is displayed correctly.

iFrame auto-height firefox latest

I'm trying to create a firefox auto-height function this what i got so far:
try {
var iframe = parent.document.getElementById('container-iframe');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
if (innerDoc.body.offsetHeight) {
/*iframe.height = */console.log(innerDoc.body.offsetHeight + 32); //Extra height FireFox
} else if (iframe.Document && iframe.Document.body.scrollHeight) {
/*iframe.height = */console.log(iframe.Document.body.scrollHeight);
}
else {
console.log("None were found");
}
}
catch(err) {
console.log(err.message);
}
This works like a charm on Chrome and Safari. But always reply None were found on the console for Firefox. I'm testing this with firefox 26 on linux and Firefox 25 on MacOS, both behave the same way.
Is there any reason why firefox doesn't fill these values? Is there any other property i could use for this same purpose?.
I've looked around for this, and it appears these worked for some version of firefox, but they don't anymore.

chrome html5 video buffered.end event

I'm trying to detect when a video file has completed loading. i made it work successfully on firefox and safari but on chrome, buffered event behaves strange..
so,
in my local host chrome works fine but when i upload to server;
buffer percentage stops about %50 but buffers %100,
when page refreshed, percentage stay at %0 but it continues to buffering..
here is my javascript
function loaded()
{
var v = document.getElementById('myVideo');
var r = v.buffered;
var total = v.duration;
var current=v.currentTime;
var start = r.start(0);
var end = r.end(0);
var downloadPercent= Math.round((end / total)*100)
$("#loadProgress").css('width',downloadPercent+ '%');
if(downloadPercent==100){
$("#preloaderWrapper").fadeOut(function(){
document.getElementById('myVideo').play();
clearInterval(ratoteLoad);
$(this).remove();
});
}
}
$('#myVideo').bind('progress', function()
{
loaded();
});
any idea?
thank you

try this instead:
myVideoTag = document.getElementById('video');
myVideoTag.addEventListener('progress', function(e) {
var percent = null;
// FF4+, Chrome
if (myVideoTag && myVideoTag.buffered && myVideoTag.buffered.length > 0 && myVideoTag.buffered.end && myVideoTag.duration) {
percent = myVideoTag.buffered.end(0) / myVideoTag.duration;
}
// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
// to be anything other than 0. If the byte count is available we use this instead.
// Browsers that support the else if do not seem to have the bufferedBytes value and
// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
else if (myVideoTag && myVideoTag.bytesTotal != undefined && myVideoTag.bytesTotal > 0 && myVideoTag.bufferedBytes != undefined) {
percent = myVideoTag.bufferedBytes / myVideoTag.bytesTotal;
}
if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));
// ... do something with var percent here (e.g. update the progress bar)
}
}, false);
... comments copied from mediaelement.js, code as well but adjusted for easier display here. I omitted the code for Firefox 3.0 as it's less than relevant.
working fine in all current browsers
PS: thx to John Dyer for mejs - great stuff ;)