Open page in new window without popup blocking

Question

Hope you can help a bit here... I have a form that translate a word in a field, populate the field with the translated term and then do submit action all in one submit button.

the submit is being made by jquery. problem is the target page is being blocked as all 3 major browsers treat it as popup, Do you know how to let it open just as a new tab or new window ? I don't want to set the target as _self as I want people to have my site open as well.

I believe the problem is in this string:

document.forms.form1.submit();

but I also know there should be a way to rephrase it so the target won't be treated as a popup.

this is the script:

<script type="text/javascript">

$(function transle() {
  $('#transbox').sundayMorningReset();
  $('#transbox input[type=button]').click(function(evt) {
    $.sundayMorning(
      $('#transbox input[type=text]').val(), {
        source: '',
        destination: 'ZH',
        menuLeft: evt.pageX,
        menuTop: evt.pageY
      },
      function(response) {
        $('#transbox input[type=text]').val(response.translation);

        //document.getElementById("form1").submit();
        document.forms.form1.submit();

      }
    );
  });
});

</script>

and this is the form:

<table id="transbox" name="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
  <form action="custom-page" method="get" name="form1" target="_blank" id="form1">

    <tr>
      <td>
        <input id="q" name="q" type="text" class="search_input" onFocus="if (this.value == 'Evening dress') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Evening dress';}" value="Evening dress" />
      </td>
      <td>
        <input type="button" value="Find" style="color: #333; width: 157px; font-weight:bold"></input>
      </td>
    </tr>

  </form>
</table>

EDIT

I have tried all of these strings to submit:

document.getElementById("form1").submit();
document.forms.form1.submit();
form1.submit();

all ends up with the target being popup blocked. please, is there any other way I should do the code to not let it popup ?

maybe should use the onsubmit to make jQuery ? someone knows how ?

Does it work with the popup blocker off. Also you can use $("#form1").submit(); to submit the form instead of document.forms.form1.submit(); — Adam Magaluk, Aug 21 '11 at 15:31
yes, when I approve popups there is no problem. also if it is submited by the submit button and not jquery is nt regarded as popup. — li., Aug 21 '11 at 15:32
Check out http://stackoverflow.com/questions/178964/javascript-post-on-form-submit-open-a-new-window — Adam Magaluk, Aug 21 '11 at 15:44
@D. Mathis , not sure how to do that. can you show me in the code ? — li., Aug 21 '11 at 15:48
Hi, I have checked the additional js included and I fount that this code: $.fn.sundayMorningReset = function() { return this.each(function() { $(this).unbind('.sundayMorning'); }); } is the one causing the form1.submit(); not to work, do you have any clue to why ? — li., Aug 21 '11 at 16:15
There's a reason browsers started implementing pop-up blockers. Instead of fighting it, perhaps rethink having a pop-up at all. — DA., Aug 22 '11 at 02:32

score 92 · Answer 1 · edited May 23 '17 at 12:17

92

A browser will only open a tab/popup without the popup blocker warning if the command to open the tab/popup comes from a trusted event. That means the user has to actively click somewhere to open a popup.

In your case, the user performs a click so you have the trusted event. You do lose that trusted context, however, by performing the Ajax request. Your success handler does not have that event anymore. The only way to circumvent this is to perform a synchronous Ajax request which will block your browser while it runs, but will preserve the event context.

In jQuery this should do the trick:

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});

Here is your answer: Open new tab without popup blocker after ajax call on user click

edited May 23 '17 at 12:17

Community

1
1

answered Nov 27 '13 at 06:51

Nam Nguyen

2,438
21
18

5

This solution doesn't seem to work anymore. The new window doesn't open and the web console shows the error: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/" – John Smith Optional Oct 17 '16 at 11:21
This solution works on my browser and shows the above as a warning. – Guillaume Massé Aug 24 '17 at 16:34
works, but I got warning: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. – hoogw Nov 13 '18 at 16:27
1

async:false is the solution for me , thank you – sradha Feb 03 '22 at 05:23

score 21 · Answer 2 · answered May 09 '18 at 09:03

21

This is the only one that actually worked for me in all the browsers

let newTab = window.open(); newTab.location.href = url;

answered May 09 '18 at 09:03

pomobc

361
3
5

Worked for me. Thank you! – Duc Manh Nguyen Jun 26 '19 at 16:19

score 13 · Answer 3 · answered Aug 22 '11 at 02:34

13

As a general rule, pop up blockers target windows that launch without user interaction. Usually a click event can open a window without it being blocked. (unless it's a really bad popup blocker)

Try launching after a click event

answered Aug 22 '11 at 02:34

Coomie

4,832
3
32
44

score 7 · Answer 4 · edited Feb 18 '17 at 11:45

7

PS> I posted this answer on a related question. Here's how I got round the issue of my async ajax request losing the trusted context:

I opened the popup directly on the users click, directed the url to about:blank and got a handle on that window. You could probably direct the popup to a 'loading' url while your ajax request is made

var myWindow = window.open("about:blank",'name','height=500,width=550');

Then, when my request is successful, I open my callback url in the window

function showWindow(win, url) {
     win.open(url,'name','height=500,width=550');
}

edited Feb 18 '17 at 11:45

Hakan Fıstık

16,800
14
110
131

answered Oct 19 '15 at 13:51

wsgeorge

1,928
17
20

2

this works if you want to open a new window anyway. what if the open is conditional based on the callback. we would have to call `.close()` and it would create an open/close flash.... any ideas? – LeOn - Han Li Feb 08 '17 at 20:17

score 4 · Answer 5 · edited Dec 07 '12 at 14:04

4

For the Submit button, add this code and then set your form target="newwin"

onclick=window.open("about:blank","newwin")

edited Dec 07 '12 at 14:04

WEFX

8,298
8
66
102

answered Dec 07 '12 at 13:41

Alan Gochin

57
1
2

score -2 · Answer 6 · answered Dec 26 '16 at 08:18

-2

function openLinkNewTab (url){
    $('body').append('<a id="openLinkNewTab" href="' + url + '" target="_blank"><span></span></a>').find('#openLinkNewTab span').click().remove();
}

answered Dec 26 '16 at 08:18

Леонид Букарев

13
1

3

Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Dec 26 '16 at 08:41
1

Tried this quickly in scratchpad (Firefox) and (as expected) this triggered my popup blocker. `openLinkNewTab('https://ddg.gg');` – retrovertigo Jan 23 '17 at 04:05

Open page in new window without popup blocking

6 Answers6

Linked