CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
Viewsonic
Viewsonic

Reputation: 947

New tab window gets blocked when tried to open it after some amount of time

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 ...

  1. the elapsed time between the moment the user interacted with the browser and when the tab window gets asked to be opened, or
  2. how the script thread flows, or
  3. any other reason?

Upvotes: 6

Views: 1472

Answers (1)

Viewsonic
Viewsonic

Reputation: 947

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.

Upvotes: 3

Related Questions