javascript: window.close(); после X количества секунд

Question

У меня есть всплывающее окно с действием OnClick, чтобы закрыть окно при нажатии кнопки отправить:

<input type="submit" name="submit" value="submit" onclick="javascript: window.close();"> 

Я пытаюсь адаптировать его ждать 3 секунды после того, как кнопка отправки нажмите, чтобы закрыть.

я прочитал статью, в которой предложил использовать это в:

<script> 
setTimeout("window.close()",3000) 
</script> 

, но она закрывает всплывающее после 3-х секунд, независимо от того, или не будет нажата кнопка.

Как я могу приспособить его для работы с кнопкой?

Answer 1

Просто попробуйте совмещая все:

<input type="submit" name="submit" value="submit" onclick="setTimeout('window.close()',3000);"> 

Answer 2

Попробуйте с:

<input type="submit" name="submit" value="submit" onclick="closeWindow()"> 

Затем на Javascript, добавьте функцию следующим образом:

function closeWindow(){ 
    setTimeout("window.close()", 3000); 
} 

Не тестировался, но он должен работать ,

Answer 3

Ваша первая версия работает как написано

<input type="submit" name="submit" value="submit" onclick="javascript: window.close();"> 

В том, что она закрывает окно при нажатии.

Ваша вторая версия работает так, как написано. Но вы, кажется, немного смущены, поэтому позвольте мне немного объяснить.

<script> 
setTimeout("window.close()",3000) 
</script> 

Когда это встроено в ваш html-файл, оно будет выполняться, когда оно будет достигнуто во время рендеринга представления. Когда этот код выполняется, этот код говорит, чтобы построить новую функцию из строкового аргумента, а затем вызвать ее в 3000 миллисекунд.

Он не привязан ни к чему, он просто запускается, когда движок рендеринга сталкивается с ним.

Чтобы связать это с чем-то (и не просто взять ярлык для его размещения на элементе, как показано в первой версии), вам понадобится событие . В javascript это событие будет событием click. Чтобы получить доступ к событию click, вам нужно поместить clickeventhandler в элемент, для которого вы хотите обработать событие. И чтобы получить доступ к элементу, вы должны запросить страницу для него, когда загружается DOM.

querySelectorAll documentation

<script> 
window.onload = function(){ //this line of code will wait for the DOM to load 
//once loaded, it will execute the "anonymous" function which is the code here 

//now in here we can find the element 
//since there is no id or class, we can look for an input with name=submit 
var submitInput = document.querySelectorAll("input[name=submit]")[0]; 

//once the element is found, we can attach the handler to it 
submitInput.onclick = function(){ //once again this "anonymous" function executes when the event fires 
    //in here you can execute the timeout 
    //lets use an anonymous function instead of constructing one from a string 
    setTimeout(function(){ 
    window.close(); 
    },3000); 
}; 
}; 
</script> 

После выполнения этого, вы можете удалить обработчик OnClick событие из элемента

<input type="submit" name="submit" value="submit" /> 

И там у вас есть, на практике подход лучше всего подходит для вашей ситуации.

JQuery

Если вы настроены на использование JQuery, чтобы сделать это, вы можете использовать ярлык для document.ready функциональности (как в ожидании все элементы должны быть доступны), а затем в обратном вызове этого ярлыка вы бы нацелили на элемент (в jQuery вы используете селектор css-ish), а затем скажите jQuery зарегистрироваться для события click, что связано с другой функцией обратного вызова.

Это будет выглядеть следующим образом:

<script> 
$(function(){//document.ready shortcut 
    $("input[name=submit]").click(function(){//target element and request click event 
    setTimeout(function(){window.close();},3000);//timeout code to close window 
    }); 
}); 
</script>