我正在开发一个网页,用户可以在其中选择多个广播组。如果用户单击链接并离开页面,然后单击“后退”按钮返回页面,则浏览器的默认行为是记住用户的先前选择并保留它们。
在使用后退按钮的情况下,是否可以使用JavaScript(jQuery ok)取消选择先前的选择?在控制台中,我可以使用.reset()或.checked = false取消选择;但是我的问题是要在按下后退按钮时运行它。
这是一个基本示例,其中我尝试在popstate事件上运行代码。如果您选择一个选项并单击链接,然后在窗口中单击鼠标右键并选择“后退”,则仍将选中您选中的收音机。
window.addEventListener('popstate', function(event) {
document.getElementById("radio-group").reset();
}, false);
<!-- SCREEN ONE -->
<div>
<form id="radio-group">
<input type="radio" name="letter" value="A" id="radio-1"><label for="radio-1"><span>A</span></label>
<input type="radio" name="letter" value="B" id="radio-2"><label for="radio-2"><span>B</span></label>
<input type="radio" name="letter" value="C" id="radio-3"><label for="radio-3"><span>C</span></label>
</form>
</div>
<a href="something">link</a>
答案 0 :(得分:2)
unload
事件运行正常:
window.addEventListener('unload', function(event) {
document.getElementById("radio-group").reset();
}, false);
<!-- SCREEN ONE -->
<div>
<form id="radio-group">
<input type="radio" name="letter" value="A" id="radio-1"><label for="radio-1"><span>A</span></label>
<input type="radio" name="letter" value="B" id="radio-2"><label for="radio-2"><span>B</span></label>
<input type="radio" name="letter" value="C" id="radio-3"><label for="radio-3"><span>C</span></label>
</form>
</div>
<a href="something">link</a>
您还可以使用beforeunload
事件
答案 1 :(得分:0)
您可以使用pageshow
事件:
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
document.getElementById("radio-group").reset();
}
});