Question

如何在网站中使用JavaScript或jQuery在浏览器会话期间仅展示一次广告横幅？会话关闭且浏览器关闭后，当我再次在浏览器中打开网站时，必须再次显示广告。除非没有关闭，否则当我浏览网站横幅时，还必须显示另一件事。

Answer 1

您可以使用Cookie记住是否显示广告。

您可以使用此插件：https://github.com/carhartl/jquery-cookie

制作显示广告的方法：

showAd() {
 // cookie not set, display the ad and set the cookie
 if($.cookie('adDisplayed') === 'undefined') {
   // code to display the add
   // .....
   // set cookie
   $.cookie('adDisplayed', '1', { expires: 7 }); // set the cookie

 }
}

要在用户离开页面时销毁cookie，请绑定beforeunload事件

$(window).bind("beforeunload", function() { 
    $.removeCookie('adDisplayed'); 
})

Answer 2

您可以使用JavaScript设置Cookie以记住访问。

示例

<div id="banner"></div> <script> if(typeof $.cookie("banner") === 'undefined' || $.cookie("banner") != "1") { $("#banner").html("My Banner"); $.cookie("banner", "1"); } window.addEventListener("beforeunload", function (e) { $.removeCookie("banner"); }); </script>

Answer 3

使用sessionStorage

sessionStorage属性允许您访问session Storage object。 sessionStorage类似于Window.localStorage，唯一的区别是存储在localStorage中的数据没有过期设置，sessionStorage中存储的数据会在<{1}}时被清除页面会话结束。只要浏览器打开，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。

在新标签页或窗口中打开页面将导致启动新会话，这与会话Cookie的工作方式不同。

var banner = document.getElementById('banner'); if (sessionStorage.getItem('set') === 'set') { banner.style.display = 'none'; } else { sessionStorage.setItem('set', 'set'); }

#banner { width: 320; height: 50px; background: green; text-align: center; }

<div id="banner">Banner</div>

Fiddle Demo

Answer 4

您可以使用 fadeIn（）和 fadeOut（）方法解释here

像这样：

var myVar = setInterval(myTimer, 1000);

function myTimer() {
    $("#banner").fadeOut();
}

https://jsfiddle.net/bc8jgoga/

Fiddle Demo

广告横幅仅在浏览器会话中显示一次

4 个答案: