Question

我在Bootstrap 3.3.6上运行。我有一个非常简单的setTimeout函数，可以在10秒后触发弹出窗口。

setTimeout(function(){
        $('#myModal').modal('show');
        }, 10000);

我在主页末尾添加了此脚本。这段代码完美无缺，弹出窗口（#myModal）打开就好了。

问题是，如果我访问我网站上的其他页面，然后点击后退按钮，或点击导航栏上的主页，弹出窗口将再次闪现。

我在这里找到了一个关于使用localStorage并将其作为if / else运行的答案。基本上这样做只会在您第一次访问该页面时看到弹出窗口。但我对javascript很新，我很难做到正确。有人可以帮助我吗？

Answer 1

好吧，我想有一种方法可以创建一个cookie，然后检查它。也许您可以在主页的脚本中创建这样的cookie：

window.onload = function() {
  
  
  if (!document.cookie){
        setTimeout(function(){
            $('#myModal').modal('show');
            }, 10000);
        document.cookie = "cookie=yes; path=/";
    }
  

}

如果我已经完成了所有事情，首先应该做的是检查是否没有cookie。如果没有cookie，您的模态警报就会消失，并且会创建一个名为“cookie”且值为“yes”的cookie。由于我们没有为此cookie指定最大年龄，因此它应该在用户离开网站时到期（我认为）。此外，由于我们设置了一般路径，因此该cookie应该在每个页面中保持不变。

Answer 2

我会使用这样一个简单的方法：

＆＃13;

// load flag from localStorage
var alreadyDisplayed = localStorage.getItem('alreadyDisplayed');

// if not found or found but 'false' - display modal (alert in this case)
if (!alreadyDisplayed || alreadyDisplayed == 'false') {

  setTimeout(function() {
    alert('show');
    // store to localStorage the fact that we displayed the modal
    localStorage.setItem('alreadyDisplayed', 'true');
    
  }, 5 * 1000); // in ms, so 5*1000 = 5 secs
}

＆＃13;

阻止页面上的setTimeout函数重新加载

2 个答案: