如何使用浏览器后退按钮关闭引导模式而不是返回页面？`
Posted
技术标签:
【中文标题】如何使用浏览器后退按钮关闭引导模式而不是返回页面？`【英文标题】：how to close a bootstrap modal with the browser back button instead of going back a page?` 【发布时间】：2013-05-28 00:37:24 【问题描述】：我发现这是智能手机的问题，它可能与台式机有关。我们已经“修改”了我们的引导模态以响应，但是当它在智能手机上以全屏显示时，用户假设模态是一个页面并单击返回以“关闭”它。我们在右上角的 X 中包含了 ，但也希望后退按钮关闭模式。有人有什么想法吗？
谢谢
【问题讨论】：
我们在移动应用程序中遇到了与 Bootstrap 3.0 模态完全相同的问题。我们也在使用 AngularJS 1.4.7。我们修复了这里提到的这个问题，***.com/a/34351827/1069893。不过，仅当您使用 AngularJS 时，提到的答案才是相关的。 【参考方案1】：感谢http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html，我找到了更好的方法
$('#myModal').on('show.bs.modal', function(e)
window.location.hash = "modal";
);
$(window).on('hashchange', function (event)
if(window.location.hash != "#modal")
$('#myModal').modal('hide');
);
【讨论】：
【参考方案2】：最简单的方法是让用户觉得它的弹出窗口或模型不是新页面，通过使用一些边距或使其 span10 offset1 种。
另一种方法是打开和关闭方法，描述为here
最好的方法是
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() window.history.forward();
</SCRIPT>
</HEAD>
<BODY onload="noBack();"onpageshow="if (event.persisted) noBack();" onunload="">
描述为here
对于从 iFrame 控制后退按钮，试试这个可能会有所帮助（未测试）
<SCRIPT type="text/javascript">
window.parent.history.forward();
function noBack() window.parent.forward();
</SCRIPT>
</HEAD>
【讨论】：
谢谢，有点工作，但与 Modal 混淆了，我将不得不更深入地了解一下。干杯。 感谢@SlimGG - 我一直在看这个，它适用于父页面。但是我正在使用 iFrame 并尝试将代码放入 iframe 头部内容中，但它不起作用。我想我正在寻找一个仅在模式打开时才禁用后退按钮的功能。 U 可以使用 window.parent.document 访问父窗口。更多信息***.com/a/726866/923426【参考方案3】：您可以通过编写几行代码来做到这一点，但是您需要一种更好的方法来获得一致的结果，即按下浏览器/移动设备后退按钮并使用 [x] 按钮隐藏模式或单击外部模态工作相同。
从这个意义上说，我认为以下方法是更好的解决方案。它适用于具有 Bootstrap 4.0 或更高版本的现代浏览器（HTML5 Javascript ES6），但您可以对其进行调整以支持较旧的浏览器。
1- 将data-hash="#some-hash" 属性分配给您要通过浏览器后退按钮关闭的所有模式。
2- 负责将哈希附加到 url 的块
// Add hash to the URL on open modal event
$('.modal').on('shown.bs.modal', function()
if (typeof(this.dataset.hash) !== 'undefined')
history.pushState(null, null, this.dataset.hash)
)
3- 监听hide.bs.modal 事件并判断是否按下了返回按钮
// trigger browser back button when the modal is dismissed (using x button etc...)
$('.modal').on('hide.bs.modal', function(event)
if (this.dataset.pushback !== 'true')
event.preventDefault()
history.back()
this.dataset.pushback = ''
)
4- 负责处理浏览器后退按钮的块。我们添加pushback 属性作为标志来指示后退按钮按下事件。
// Close current open modal (if any) on browser back event
window.onpopstate = function()
let open_modal = document.querySelector('.modal.show')
if (open_modal)
open_modal.dataset.pushback = 'true';
$(open_modal).modal('hide')
【讨论】：
【参考方案4】：我使用此代码，它也适用于单个页面中的多个模式：
$('#myModal').on('show.bs.modal', function (e)
window.history.pushState('#myModal', "Modal title", document.location+'#myModal');
).on('hide.bs.modal', function (e)
if ( window.history.state === '#myModal' )
history.go(-1);
)
然后附加一个“hashchange”事件监听器来隐藏后退按钮的模式：
window.addEventListener("hashchange", function(e)
$('#myModal').modal('hide');
)
【讨论】：
【参考方案5】：这是我如何让它与 BootstrapDialog 插件一起使用...每个弹出窗口 3 个单行（这允许多个弹出窗口，并且只有最近的在后面关闭）
//Within the BootstrapDialog INIT...
ContactInfosDialog = BootstrapDialog.show(
data: ...
//Add to history so Back button closes popup instead of going back.
onshown: function() location.hash += '-popContactInfos';,
//Go back on history when closing popup, so Back button works for page next time
onhidden: function() if (location.hash.indexOf('-popContactInfos') > -1)
history.back();
,
title: ...
etc: ...
);
//Anywhere outside the BootstrapDialog INIT...
//Back button will just move back history on first click,
//below will make it also close the popup.
$(window).on('hashchange', function()
if (location.hash.indexOf('-popContactInfos')===-1)
ContactInfosDialog.close();
);
/*
HOW IT WORKS:
1) Setting location.hash will add a hashtag #name to the URL.
I use += to add to the hash name, so multiple popups would be url#-pop1-pop2
2) When the popup is closed, history.back will back up one step to url#-pop1
3) hashchange lets you look at the url#popups-list when the url changes,
and if your popup name isn't in the list we know to close it.
*/
【讨论】：
以上是关于如何使用浏览器后退按钮关闭引导模式而不是返回页面？`的主要内容，如果未能解决你的问题，请参考以下文章
java web中点击一个类似按钮的怎么关闭当前的这个页面而返回到前一个页面（在不出现新页面的情况下）
当客户端通过点击后退按钮进入页面时，如何使其加载新副本而不是缓存副本？