「twitterに投稿」みたいなボタンをクリックしたときにblt.lyとかのAPIで短縮URLを作って、window.openで別ウィンドウでtwitterを開きたい場合に、bit.lyのAPIを呼ぶJSONPが非同期処理になるので、ほとんどのブラウザでポップアップブロックに引っかかってしまいます。

以前、これ困ったねーって@sugyanと話してたんですけど、@taku_eofにその話しして、色々方法考えてたらよさげなのがでたんでやってみました。

まず、これはポップアップブロックされます。

$('#hoge').click(function() {
    $.ajax({
        type: "GET",
        dataType: 'jsonp',
        url: "http://api.bit.ly/shorten",
        data: {...},
        success: function(data) {
            ...
            window.open('http://twitter.com?status=' + url, '_blank');
        }
    });
    return false;
});

で、問題はJSONPのコールバックのなかでwindow.openを呼んでるからなので、JSONPの前にwindow.openで空のページをつくっておいて後からURLを入れればいいんじゃないかという方法。

$('#hoge').click(function() {
    var w = window.open('', '_blank'); // ← ここでウィンドウ開いていおく
    $.ajax({
        type: "GET",
        dataType: 'jsonp',
        url: "http://api.bit.ly/shorten",
        data: {...},
        success: function(data) {
            ...
            w.location.href = 'http://twitter.com?status=' + url;
        }
    });
    return false;
});

これならポップアップブロックされずに済みます。

ただAPIから応答が返ってくるまで真っ白なページなうえ、IE6とIE7は一瞬「このページは見つかりません」的な表示になるみたいなので、空のページじゃなくてローディングページ的なものを用意しておくといいかもしれません。