web-dev-qa-db-ja.com

ポップアップブロックなしで新しいウィンドウでページを開く

ここで少しお役に立てば幸いです...私はフィールド内の単語を翻訳し、翻訳された用語をフィールドに入力して、1つの送信ボタンで送信アクションを実行するフォームを持っています。

送信はjqueryによって行われます。問題は、3つの主要なブラウザすべてがポップアップとして扱うため、ターゲットページがブロックされていることです。新しいタブまたは新しいウィンドウとして開くようにする方法を知っていますか？ターゲットを_selfに設定したくないのは、他の人にもサイトを開いてもらいたいからです。

私は問題がこの文字列にあると信じています：

document.forms.form1.submit();

しかし、ターゲットがポップアップとして扱われないように、言い換える方法が必要であることも知っています。

これはスクリプトです：

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

そして、これはフォームです：

<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 [〜＃〜]

これらすべての文字列を送信しようとしました。

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

最終的に、ターゲットがポップアップブロックされます。どうか、ポップアップしないようにコードを実行する他の方法はありますか？

おそらくonsubmitを使用してjQueryを作成する必要がありますか？誰かが方法を知っていますか？

javascriptjquerypopup
36
li.

ブラウザは、タブ/ポップアップを開くコマンドが trustedイベント から来る場合、ポップアップブロッカー警告なしでタブ/ポップアップのみを開きます。つまり、ユーザーはポップアップを開くためにどこかをクリックする必要があります。

あなたの場合、ユーザーはクリックを実行するので、信頼できるイベントができます。ただし、Ajaxリクエストを実行すると、その信頼されたコンテキストは失われます。成功ハンドラには、そのイベントはもうありません。これを回避する唯一の方法は、同期Ajaxリクエストを実行することです。これは、ブラウザの実行中はブロックしますが、イベントコンテキストは保持します。

JQueryでは、これでうまくいくはずです。

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

あなたの答えは次のとおりです： ユーザーがクリックしたときにajaxを呼び出した後、ポップアップブロッカーなしで新しいタブを開きます

75
Bảo Nam

一般的な規則として、ポップアップブロッカーは、ユーザーの操作なしで起動するウィンドウをターゲットにします。通常、クリックイベントcanブロックせずにウィンドウを開きます。 （それが本当に悪いポップアップブロッカーでない限り）

クリックイベント後に起動してみてください

10
Coomie

これは、実際にすべてのブラウザで私のために働いた唯一のものです

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

7
pomobc

PS>関連する質問にこの回答を投稿しました。信頼されたコンテキストを失う非同期ajaxリクエストの問題をどのように回避したかを以下に示します。

ユーザーがクリックしたときにポップアップを直接開き、URLを_about:blank_にリダイレクトして、そのウィンドウのハンドルを取得しました。あなたはおそらくあなたのajaxリクエストが行われている間に「ロード」URLにポップアップを向けることができます

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

次に、リクエストが成功したら、ウィンドウでコールバックURLを開きます

_function showWindow(win, url) {
     win.open(url,'name','height=500,width=550');
}
_
6
wsgeorge

[送信]ボタンの場合、このコードを追加し、フォームを設定しますtarget = "newwin"

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