Vie*_*nic 6 html javascript jquery html5 google-chrome
我在一段时间后打开一个新的标签窗口时遇到问题.我做了两个不同的实验.在第一个实验中我使用了该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(...)函数,新的选项卡窗口仅在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
我的问题是:您是否知道发生这种情况的原因是什么？可能是以下情况之一......
这是我的两分钱，希望对其他人有帮助。
由于我们无法控制浏览器在一定时间后打开新选项卡窗口，因此我们最好的选择可能是重新组织一下代码。根据您的情况，以下代码可能是您正在寻找的方法。就我而言，它成功了。这是一种非常简单的方法，您可能不会很快弄清楚，因为您可能会专注于 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, output
特别感谢我的朋友詹姆斯提出的方法建议。
| 归档时间： |
|
| 查看次数： |
89 次 |
| 最近记录： |