一段时间后尝试打开新选项卡窗口时，它会被阻止

一段时间后，我在打开新的选项卡窗口时遇到问题。我做了两个不同的实验。在第一个实验中，我使用了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，输出

实验2:

在这个实验中，我使用了一个自定义的：sleep(...)函数，只有当睡眠时间大于或等于1000毫秒时(在我的实验中(，新的选项卡窗口才会在Chrome上被阻止。

...
$('.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，输出

我的问题是：你知道发生这种情况的原因是什么吗？，也许是以下其中之一。。。

从用户与浏览器交互到要求打开选项卡窗口之间的经过时间，或者
脚本线程的流动方式，或者
还有其他原因吗

这是我的两分钱，我希望它能帮助别人。

由于我们无法控制浏览器在一定时间后打开新的选项卡窗口，因此我们最好的办法可能是重新组织一些代码。根据您的情况，以下代码可能是您正在寻找的方法。就我而言，它成功了。这是一个非常简单的方法，你可能不会很快弄清楚，因为你可能会被困在get: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，输出

特别感谢我的朋友James提出的方法建议。

相关内容

最新更新

热门标签：