单击后显示 Flash 消息，返回并前进浏览器按钮

Question

从服务器收到请求后，我显示了闪现消息。如果用户同时单击“后退”和“前进”按钮...他再次看到相同的闪现消息，我认为这对用户来说是一个不好的消息...我该如何解决这个问题？

Answer 1

您可以将显示的消息中的 messageId 存储在一个变量中或使用 JavaScript 的（隐藏）输入字段中，这样您就可以检查消息是否已经显示。

Answer 2

这是因为浏览器帮助您加载带有缓存的页面。你可以做到这些

header('Cache-Control: no-store, private, no-cache, must-revalidate');
header('Cache-Control: pre-check=0, post-check=0, max-age=0, max-stale = 0', false);

或

<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="pragma" content="no-cache"/>

或

@if(Session::has('message'))
    <div class="alert alert-{{ Session::get('status') }} status-box">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        {{ Session::get('message') }}
    </div>
@endif

Answer 3

我用下面的代码解决了这个问题

  <script>
   @if(!empty(Session::get('message')))
    var popupId = "{{ uniqid() }}";
    if(!sessionStorage.getItem('shown-' + popupId)) {
        swal({
            html:
            "{{Session::get('message')}}",
            showCloseButton: true,
            showCancelButton: false,
            showConfirmButton: false,
            animation: false,
            customClass: 'animated tada',
            focusConfirm: false,
            background: '#008eb0'
        });
    }
    sessionStorage.setItem('shown-' + popupId, '1');
    @endif
</script>

Answer 4

派对迟到了，但上面提出的 header 解决方案对我不起作用。

相反，我使用 performance.getEntriesByType（得到广泛支持）来确定用户是否通过后退按钮到达页面，如果是，我从 flash 中删除显示 flash 消息的代码消息容器：

<script>
        var perfEntries = performance.getEntriesByType("navigation");
        for (var i = 0; i < perfEntries.length; i++) {
            if(perfEntries[i].type === "back_forward"){ // if user has reach the page via the back button...
                document.querySelector("#flashMessageContainer").innerHTML = ""; //...delete the contents of the flash container
            }
        }
</script>

'performance.getEntriesByType("navigation")' returns "back_forward" 如果用户通过单击后退或前进浏览器按钮到达页面（在我的例子中，闪现消息不是'也不需要向前单击）。它 returns "navigate" 如果 link 被点击或表单提交导致重定向。

归因：我从llaaalu

那里捏了the solution

单击后显示 Flash 消息，返回并前进浏览器按钮

Flash message shows after clicking, go back and go forward browser button

php

laravel

flash-message