私のWebサイトには、window.open
を呼び出す関数を呼び出すためのボタンがありますが、最近、ポップアップを開く前にサーバー側のチェックを行うための調整が必要でした。
AJAX呼び出しを行うコードが追加されて以来、ブラウザはAJAXのsuccess
コールバックで開かれるポップアップをブロックしますユーザーのクリックイベントによって呼び出されない場合、ブラウザがポップアップをブロックする可能性があることを読んだので、AJAXリクエストをasync: false
に設定して、Firefoxの問題を解決しました。 Google Chromeは引き続きポップアップをブロックし続けます。これを回避する方法はありますか?
サーバー側のチェックをポップアップで開かれるページに移動することもできますが、可能であれば、ポップアップを開く前にそれを実行したいと思います。
コード:
<a id="attackButton" href="#">Attack Base!</a>
<script type="text/javascript">
$(function() {
$('#attackButton').click(function() {
$.ajax({
url: baseurl + '/index.php?option=com_pbbgs&format=raw&getinfo=goingame',
data: { 'gameid': 618 },
dataType: 'text',
async: false,
type: 'POST',
success: function(data) {
eval(data);
if (window.gameURL) {
goingameRaw();
}
}
});
return false;
});
});
function goingameRaw()
{
window.open(window.gameURL,'test','left=20,top=20,width=1024,height=640,toolbar=0,resizable=0,location=0');
}
</script>
応答本文の例:
window.gameURL="http://mydomain.com/index.php?option=com_pbbgs&format=raw&startgame=618&width=1024&height=640";checktutorial('js','attack');
はい、ポップアップはユーザーアクションの直接の結果である必要があります。 ajaxコールバックでそれらを実行しても、トリックは実行されません。また、async:false
は悪い-FFではブラウザ全体をブロックすることが知られています。チェックを行う他の方法を考えてください。
Emilの優れた回答に続いて、「クリックしてポップアップを開き、後でコールバックが起動したときにポップアップを操作できます」。この実装を使用しました。
$('#attackButton').click(function() {
新しいコードはこちら
var win = window.open('');
window.oldOpen = window.open;
window.open = function(url) { // reassignment function
win.location = url;
window.open = oldOpen;
win.focus();
}
新しいコードを終了
$.ajax({
url: baseurl + '/index.php',
data: { 'gameid': 618 },
type: 'POST',
success: function(data) {
window.open('some url'); // will call reassignment function above
}
});
return false;
});
Onclickイベントのすぐ下でブロックされていないウィンドウを開くことができます。ajax呼び出しで開くと、ポップアップと見なされます。しかし、ポップアップを開いてブロックされないようにするために、しばらくこのメソッドを使用して成功しました。
http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/
私の場合、window.open
は角度付きのpromise
内で起動され、ポップアップブロッカーがオンになりました。私の解決策は次のとおりです。
$scope.gotClick = function(){
var myNewTab = browserService.openNewTab();
someService.getUrl().then(
function(res){
browserService. updateTabLocation(res.url, myNewTab);
}
);
};
browserService:
this.openNewTab = function(){
var newTabWindow = $window.open();
return newTabWindow;
}
this.updateTabLocation = function(tabLocation, tab) {
if(!tabLocation){
tab.close();
}
tab.location.href = tabLocation;
}
これは、promise
応答を使用してポップアップブロッカーを呼び出さずに新しいタブを開く方法です。
私はこの方法を使用します:
window.location.href = window.location.protocol + '//' +
window.location.Host + window.location.pathname +
"?download=" + encodeURIComponent(urlToDownload)
function param(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return results[1] || 0;
}
var downloadParam = param('download');
if (downloadParam) {
window.location = decodeURIComponent(downloadParam);
}
以前のソリューションは私にはうまくいきませんでしたが、私はそれに基づいて名前付きウィンドウを使用しました。
internalCounter++;
var tabbedWin = window.open('','windowName_'+internalCounter);
$.ajax({
url: url,
async: false,
indexValue:internalCounter,
success: function(){
var w= window.open(url, 'windowName_'+this.indexValue);
w.focus();
}
})