100

ハイパーリンクのクリック イベントで条件付きで JQuery ダイアログを表示したい。

条件1でJQueryダイアログを開くなどの要件があり、条件1が満たされない場合は、クリックイベントが問題になっている「href」タグで参照されているページに移動します。

リンクのクリックイベントで関数を呼び出すことができます。この関数は、別の URL (Spring コントローラーを実行して応答を返す) を実行することによって、上記の条件をチェックするようになりました。

window.open のみがポップアップ ブロッカーによってブロックされているため、すべてが完璧に機能します。

$('a[href*=/viewpage?number]').live('click', function(e) {
    e.preventDefault();
    redirectionURL = this.href;
    pageId= getUrlVars(redirectionURL)["number"];
    $.getJSON("redirect/" + pageId, {}, function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    });
});

コードから削除するe.preventDefault();と、ポップアップブロッカーはページをブロックしませんが、条件1の場合、ダイアログを開き、「href」ページを開きます。

1つを解決すると、別の問題が発生します。両方の条件を同時に正当化することはできません。

この問題を解決するのを手伝ってくれませんか?

これが解決したら、別の問題を解決する必要があります。つまり、ダイアログの OK イベントでのナビゲーションです:)

4

10 に答える 10

145

通常、ポップアップ ブロッカーは、ユーザー イベント (クリックなど) の処理中window.openに使用される場合にのみ許可されます。あなたの場合、非同期であるため、イベント中ではなく、laterを呼び出しています。window.open $.getJSON

次の 2 つのオプションがあります。

  1. ではなく、別のことをしてくださいwindow.open。

  2. ajax 呼び出しを同期化します。これは、ブラウザーの UI をロックしてしまうため、ペストのように通常は避けるべきものです。$.getJSON次と同等です。

    $.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

    $.getJSON...そして、paramsを上記にマッピングして追加することで、呼び出しを同期させることができますasync: false：

    $.ajax({
    url:      "redirect/" + pageId,
    async:    false,
    dataType: "json",
    data:     {},
    success:  function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    }
});

    繰り返しますが、目標を達成するための他の方法を見つけることができるのであれば、同期 ajax 呼び出しはお勧めしません。しかし、それができない場合は、そこに行きます。

    非同期呼び出しが原因でテストに失敗するコードの例を次に示します。

    実例| ライブ ソース (JSBin の変更により、ライブ リンクは機能しなくなりました)

    jQuery(function($) {
  // This version doesn't work, because the window.open is
  // not during the event processing
  $("#theButton").click(function(e) {
    e.preventDefault();
    $.getJSON("http://jsbin.com/uriyip", function() {
      window.open("http://jsbin.com/ubiqev");
    });
  });
});

    そして、同期呼び出しを使用して動作する例を次に示します。

    実例| ライブ ソース (JSBin の変更により、ライブ リンクは機能しなくなりました)

    jQuery(function($) {
  // This version does work, because the window.open is
  // during the event processing. But it uses a synchronous
  // ajax call, locking up the browser UI while the call is
  // in progress.
  $("#theButton").click(function(e) {
    e.preventDefault();
    $.ajax({
      url:      "http://jsbin.com/uriyip",
      async:    false,
      dataType: "json",
      success:  function() {
        window.open("http://jsbin.com/ubiqev");
      }
    });
  });
});
于 2012-03-01T10:53:33.760 に答える
17

これを試してください、それは私のために働きます、

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        success: function (data) {
            redirectWindow.location;
        }
    });
});

これはフィドルですhttp://jsfiddle.net/safeeronline/70kdacL4/1/

于 2015-05-28T16:22:11.983 に答える
8

ウィンドウは、ユーザーが開始したイベント (クリック コールバックなど) と同じスタック (別名microtask ) で作成する必要があるため、後で非同期に作成することはできません。

ただし、 URL を指定せずにウィンドウを作成し、そのウィンドウの URLを知っていれば、非同期でも変更できます。

window.onclick = () => {
  // You MUST create the window on the same event
  // tick/stack as the user-initiated event (e.g. click callback)
  const googleWindow = window.open();

  // Do your async work
  fakeAjax(response => {
    // Change the URL of the window you created once you
    // know what the full URL is!
    googleWindow.location.replace(`https://google.com?q=${response}`);
  });
};

function fakeAjax(callback) {
  setTimeout(() => {
    callback('example');
  }, 1000);
}

最新のブラウザーは空白のページ (しばしば と呼ばれる) でウィンドウを開き、about:blankURL を取得する非同期タスクがかなり迅速であると仮定すると、結果の UX はほとんど問題ありません。ユーザーが待機している間に読み込み中のメッセージ (または何か) をウィンドウに表示したい場合は、 Data URIsを使用できます。

window.open('data:text/html,<h1>Loading...<%2Fh1>');
于 2016-05-24T23:56:17.500 に答える
2

ユーザーがイベントを開始する必要があるという観察は、これの最初の部分を理解するのに役立ちましたが、その後も Chrome と Firefox は新しいウィンドウをブロックしていました。2 番目の部分は、1 つのコメントで言及されたリンクに target="_blank" を追加することでした。

要約すると、ユーザーが開始したイベント (この場合はリンクをクリック) から window.open を呼び出す必要があり、そのリンクには target="_blank" が必要です。

以下の例では、リンクは class="button-twitter" を使用しています。

$('.button-twitter').click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  var tweet_popup = window.open(href, 'tweet_popup', 'width=500,height=300');
});
于 2014-01-06T16:24:21.797 に答える
2

a link要素を使用してみて、javascript でクリックします

<a id="SimulateOpenLink" href="#" target="_blank" rel="noopener noreferrer"></a>

そしてスクリプト

function openURL(url) {
    document.getElementById("SimulateOpenLink").href = url
    document.getElementById("SimulateOpenLink").click()
}

このように使用してください

//do stuff
var id = 123123141;
openURL("/api/user/" + id + "/print") //this open webpage bypassing pop-up blocker
openURL("https://www.google.com") //Another link
于 2017-10-16T16:30:46.067 に答える