CODEWITHSUNDEEP
javascriptjquerypopup
li.
li.

Reputation: 573

Open page in new window without popup blocking

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 ?

Upvotes: 57

Views: 144387

Answers (7)

Emily_008
Emily_008

Reputation: 31

My case was a little more complex, due to the fact that my initial user interaction was

  • a button click
  • which triggered an event-handler
  • which called a method
  • that returned a promise
  • which contained an ajax call
  • and just when this promise was fulfilled actually should open the url.

The only way I got it to work correctly was in two steps, as suggested here:

function someFunctionThatsCalledByUserClick(){
    return new Promise((resolve, reject)=>{
        let newTab = window.open();     // <-- always open new tab
        return ajax_wrapper_func().then( data => {
            let url = extract_url(data);
            newTab.location.href = url;     // <-- set the url
            resolve();
        }).catch(e=>{
            newTab.close();     // <-- remove the tab on errors
            reject(e);
        });
    });
}

Upvotes: 1

pomobc
pomobc

Reputation: 441

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

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

Upvotes: 27

wsgeorge
wsgeorge

Reputation: 1968

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');
}

Upvotes: 8

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

Reputation: 13

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

Upvotes: -2

Nam Nguyen
Nam Nguyen

Reputation: 2498

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

Upvotes: 93

Alan Gochin
Alan Gochin

Reputation: 57

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

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

Upvotes: 4

Coomie
Coomie

Reputation: 4868

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

Upvotes: 13

Related Questions