[英]How do I prevent Google Chrome from blocking my popup?
On my website there is a button that just used to call a function that calls window.open
, however, recently an adjustment was needed to do a server-side check before the popup was opened.在我的网站上,有一个按钮只是用来调用一个调用window.open
的函数,但是,最近需要进行调整以在打开弹出窗口之前进行服务器端检查。
Ever since the code was added that does the AJAX call, browsers blocks the popup, that is opened in the success
callback of the AJAX call.自从添加了执行 AJAX 调用的代码后,浏览器就会阻止在 AJAX 调用的success
回调中打开的弹出窗口。 I read that browsers might block the popup if it's not called by a user click event, so I tried setting the AJAX request to async: false
, which solved the problem in Firefox, but Google Chrome still keeps blocking my popup.我读到浏览器可能会阻止弹出窗口,如果它不是由用户单击事件调用,所以我尝试将 AJAX 请求设置为async: false
,这解决了 Firefox 中的问题,但谷歌浏览器仍然阻止我的弹出窗口。 Is there any way to get around this?有没有办法解决这个问题?
I could move the server-side check to the page that gets opened in the popup, but I'd like to do it before opening the popup, if possible.我可以将服务器端检查移动到在弹出窗口中打开的页面,但如果可能的话,我想在打开弹出窗口之前执行此操作。
Code:代码:
<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>
Example response body:示例响应正文:
window.gameURL="http://mydomain.com/index.php?option=com_pbbgs&format=raw&startgame=618&width=1024&height=640";checktutorial('js','attack');
Yes, popups should be a direct result of a user action.是的,弹出窗口应该是用户操作的直接结果。 Doing them in ajax callback will not do the trick.在 ajax 回调中执行它们不会成功。 Also, using async:false
is bad - in FF it is known to block the whole browser.此外,使用async:false
是不好的 - 在 FF 中,已知会阻止整个浏览器。 Think of some other way to do the check:想想其他的检查方法:
Following up on Emil's excellent answer, "you can open the popup on click and manipulate it later when the callback fires".跟进 Emil 的出色回答,“您可以在单击时打开弹出窗口,稍后在回调触发时对其进行操作”。 I used this implementation.我使用了这个实现。
$('#attackButton').click(function() {
New code here新代码在这里
var win = window.open('');
window.oldOpen = window.open;
window.open = function(url) { // reassignment function
win.location = url;
window.open = oldOpen;
win.focus();
}
end new code结束新代码
$.ajax({
url: baseurl + '/index.php',
data: { 'gameid': 618 },
type: 'POST',
success: function(data) {
window.open('some url'); // will call reassignment function above
}
});
return false;
});
You can open a window that is not blocked just under the onclick event, if you open it on ajax call it is considered popup.您可以在 onclick 事件下打开一个未被阻止的窗口,如果您在 ajax 调用中打开它,则它被视为弹出窗口。 However I used this method with success for some time to open a popup and not be blocked.但是,我成功地使用此方法打开了一个弹出窗口并且没有被阻止。
http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/ http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/
In my case the window.open
was launched inside a promise
in angular, which turned the popup blocker on, my solution was:在我的情况下, window.open
是在 angular 的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;
}
this is how you can open a new tab using the promise
response and not invoking the popup blocker.这就是您可以使用promise
响应而不调用弹出窗口阻止程序打开新选项卡的方法。
The previous solution did not work for me, but I based on it and used named window.以前的解决方案对我不起作用,但我基于它并使用了命名窗口。
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();
}
})
Here is a vanilla JavaScript solution , I am using for one of my websites, to bypass the popup blocker in Chrome.这是一个普通的 JavaScript解决方案,我用于我的一个网站,以绕过 Chrome 中的弹出窗口阻止程序。
Let us say we have the following HTML button:假设我们有以下 HTML 按钮:
<button id="clickMe">Click Me!</button>
Now when the user clicks on the button, the first thing you should do is open an empty new window.现在,当用户单击按钮时,您应该做的第一件事就是打开一个空的新窗口。 After the Fetch request is finished, update the actual window URL.在Fetch请求完成后,更新实际的窗口 URL。 If the request fails, simply close the window:如果请求失败,只需关闭窗口:
const button = document.querySelector('#clickMe');
// add click event listener
button.addEventListener('click', () => {
// open an empty window
const tab = window.open('about:blank');
// make an API call
fetch('https://reqres.in/api/users')
.then(res => res.json())
.then(json => {
// TODO: do something with JSON response
// update the actual URL
tab.location = 'https://attacomsian.com';
tab.focus();
})
.catch(err => {
// close the empty window
tab.close();
});
});
I use this method:我用这个方法:
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.