Menu
I'm having problems opening a new tab window after some amount of time. I did 2 different experiments. On the first experiment I used the setTimeout(...) function and on the second experiment I used a custom sleep(...) function.
Experiment 1:
On this experiment both browsers: Chrome and Firefox behave in the same way. When setting a number greater or equal than 2000 millis, the new tab window gets blocked. If used 1000 millis or less, then the tab window gets opened properly. Please, assume these numbers as approximate (my actual experiments).
...
$('.button_test').click(() => {
setTimeout(() => {
let newForm = $('<form>').attr({
method: 'GET',
action: 'https://www.google.com/search',
});
$('<input>').attr({
type: 'hidden',
name: 'q',
value: 'Steve Jobs',
}).appendTo(newForm);
let new_win_content = `<html><head><title>Auxiliar Tab</title></head><body></body></html>`;
let new_win = window.open();
new_win.document.write(new_win_content);
new_win.document.close();
let $body = $(new_win.document.querySelector('body'));
$body.append(newForm);
newForm.submit();
document.location.href = popunderURL;
}, 1000); // IF >= 2000 -> TAB WINDOW GETS BLOCKED ( CHROME, FIREFOX, etc.)
});
...
Here you have a live example:
https://jsbin.com/gimofah/1/edit?html,output
Experiment 2:
On this experiment, where I use a custom: sleep(...) function, the new tab window gets blocked only on Chrome when the sleep time is greater or equal to 1000 millis (as of my experiments).
...
$('.button_test').click(() => {
sleep(900); // IF >= 1000 -> POPUP WINDOW GETS BLOCKED ON CHROME (FIREFOX IS OK)
let newForm = $('<form>').attr({
method: 'GET',
action: 'https://www.google.com/search',
});
$('<input>').attr({
type: 'hidden',
name: 'q',
value: 'Steve Jobs',
}).appendTo(newForm);
let new_win_content = `<html><head><title>Auxiliar Tab</title></head><body></body></html>`;
let new_win = window.open();
new_win.document.write(new_win_content);
new_win.document.close();
let $body = $(new_win.document.querySelector('body'));
$body.append(newForm);
newForm.submit();
document.location.href = popunderURL;
});
...
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) { }
}
https://jsbin.com/ladedup/1/edit?html,output
My Question is: Do you have any idea about what's the reason for this to happen?, maybe one of the following ...
723
Go to Settings > On Startup and ensure that "Continue where you left off" is NOT selected. You then have to go into your taskbar, right click on "Google Chrome" and exit. Only then will Chrome pick up the new settings. It should work when you reopen Chrome.
Internet Explorer Blank Page However, if you'd rather a new tab open a blank page, here's how to set it. For IE 9 and IE 10, click the gear icon on the right side and select Internet Options. Under General, click the Tabs button. Under “When a New Tab is Opened,” change the option to open to: A Blank Page and click OK.
Open a new tab . Or, use a keyboard shortcut: Windows & Linux: Ctrl + t.
Hold the Ctrl key and click the link to open in a new tab. Hold the Shift key and click the link to open in a new page. Hope it helps.
Here are my two cents that I hope it can help others.
Since it is not under our control to make the browser open the new tab window after certain amount of time, probably our best bet here is to reorganize a bit the code. Depending on your situation the following code could be the approach you are looking for. In my case, it did the trick. It is a very simple approach that probably you don't figure out quickly because you could get stuck focused on get: A + B + C => D and don't think about: A + C + B => D.
<html>
<head>
<meta charset="UTF-8" />
<title>Rendering form on new tab and submitting it</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
let popunderURL = 'https://content.cambly.com/2017/02/11/ielts-topic-advertisement/';
$('.button_test').click(() => {
let new_win = window.open();
let new_win_content = `<html><head><title>Auxiliar Tab</title></head><body>Loading...</body></html>`;
new_win.document.write(new_win_content);
new_win.document.close();
setTimeout(() => {
let newForm = $('<form>').attr({
method: 'GET',
action: 'https://www.google.com/search',
});
$('<input>').attr({
type: 'hidden',
name: 'q',
value: 'Steve Jobs',
}).appendTo(newForm);
let $body = $(new_win.document.querySelector('body'));
$body.append(newForm);
newForm.submit();
document.location.href = popunderURL;
}, 5000);
});
});
</script>
</head>
<body>
<h3>Rendering form on new tab and submitting it</h3>
<button class="button_test">Click Here!</button>
</body>
</html>
Here is a live example: https://jsbin.com/muxopol/1/edit?html,output
Special thanks to my friend James for the approach suggestion.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With