一段时间后，我在打开新标签页窗口时遇到问题。我做了两个不同的实验。在第一个实验中，我使用了 setTimeout(...) 函数，在第二个实验中，我使用了自定义的 sleep(...) 函数。
实验 1:
在此实验中，两种浏览器:Chrome 和 Firefox 的行为方式相同。当设置大于或等于 2000 毫秒的数字时，新选项卡窗口将被阻止。如果使用 1000 毫秒或更少，则选项卡窗口会正确打开。请假设这些数字是近似值(我的实际实验)。
...
$('.button_test').click(() => {
setTimeout(() => {
let newForm = $('<form>').attr({
method: 'GET',
action: 'https://www.google.com/search',
});
$('<input>').attr({
type: 'hidden',
name: 'q',
value: 'Steve Jobs',
}).appendTo(newForm);
let new_win_content = `<html><head><title>Auxiliar Tab</title></head><body></body></html>`;
let new_win = window.open();
new_win.document.write(new_win_content);
new_win.document.close();
let $body = $(new_win.document.querySelector('body'));
$body.append(newForm);
newForm.submit();
document.location.href = popunderURL;
}, 1000); // IF >= 2000 -> TAB WINDOW GETS BLOCKED ( CHROME, FIREFOX, etc.)
});
...
这里有一个活生生的例子:
https://jsbin.com/gimofah/1/edit?html,output
实验 2:
在这个实验中，我使用了一个自定义的:sleep(...) 函数，当 sleep 时间较长时，新标签窗口仅在 Chrome 上被阻止或等于 1000 毫秒(根据我的实验)。
...
$('.button_test').click(() => {
sleep(900); // IF >= 1000 -> POPUP WINDOW GETS BLOCKED ON CHROME (FIREFOX IS OK)
let newForm = $('<form>').attr({
method: 'GET',
action: 'https://www.google.com/search',
});
$('<input>').attr({
type: 'hidden',
name: 'q',
value: 'Steve Jobs',
}).appendTo(newForm);
let new_win_content = `<html><head><title>Auxiliar Tab</title></head><body></body></html>`;
let new_win = window.open();
new_win.document.write(new_win_content);
new_win.document.close();
let $body = $(new_win.document.querySelector('body'));
$body.append(newForm);
newForm.submit();
document.location.href = popunderURL;
});
...
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) { }
}
https://jsbin.com/ladedup/1/edit?html,output
我的问题是:您知道发生这种情况的原因是什么吗？可能是以下原因之一......
- 从用户与浏览器交互到要求打开选项卡窗口之间耗时，或者
- 脚本线程如何流动，或者
- 还有其他原因吗？
最佳答案
这是我的两分钱，希望它能帮助到别人。
由于让浏览器在一定时间后打开新标签窗口不受我们控制，因此我们最好的选择可能是重新组织一下代码。根据您的情况，以下代码可能是您正在寻找的方法。就我而言，它成功了。这是一种非常简单的方法，您可能不会很快弄清楚，因为您可能会专注于获取:A + B + C => D 而不会考虑:A + C + B => D.
<html>
<head>
<meta charset="UTF-8" />
<title>Rendering form on new tab and submitting it</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
let popunderURL = 'https://content.cambly.com/2017/02/11/ielts-topic-advertisement/';
$('.button_test').click(() => {
let new_win = window.open();
let new_win_content = `<html><head><title>Auxiliar Tab</title></head><body>Loading...</body></html>`;
new_win.document.write(new_win_content);
new_win.document.close();
setTimeout(() => {
let newForm = $('<form>').attr({
method: 'GET',
action: 'https://www.google.com/search',
});
$('<input>').attr({
type: 'hidden',
name: 'q',
value: 'Steve Jobs',
}).appendTo(newForm);
let $body = $(new_win.document.querySelector('body'));
$body.append(newForm);
newForm.submit();
document.location.href = popunderURL;
}, 5000);
});
});
</script>
</head>
<body>
<h3>Rendering form on new tab and submitting it</h3>
<button class="button_test">Click Here!</button>
</body>
</html>
这是一个活生生的例子:https://jsbin.com/muxopol/1/edit?html,output
特别感谢我的 friend James 提供的方法建议。
关于javascript - 新标签窗口在一段时间后尝试打开时被阻止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53588491/