Question

基本上我在我的网站上放了一个带有视频的灯箱，在开头显示，您可以使用按钮跳过它或按下＆＃34; Esc＆＃34;键，但我想要的只是显示一次，我的意思是如果我在网站上刷新，或者如果我回到主页，我希望视频的div不再显示。

这是我试图做的事情

 <article id="video_holder">
    <iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <a class="close_video"> <i class="fa fa-angle-double-right"></i> Saltar Video </a>
</article>

 <script>
 $('.close_video').click(function(){
     $("#video_holder").fadeOut(500, function() {
         // Here I tried to remove the window forever
         $(this).remove();
     });          
 });
 </script>

任何人都知道如何实现它？

Answer 1

正如其他人所说，正确的方法是使用cookie。使用以下函数设置和读取cookie：

function read_video_cookie(){
        var name = "skip_video=";
        var all_cookies = document.cookie.split(';');

        for(var i = 0; i < all_cookies.length; i++){
            var c = all_cookies[i];
            while(c.charAt(0) == ' ')
                c = c.substring(1);
            if (c.indexOf(name) == 0)
                return JSON.parse(c.substring(name.length, c.length));
        }

        return false;
    }

    function set_video_cookie(){
        $skip_video = true;
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000)); // Cookie expires in 1 year
        var expires = "expires=" + d.toUTCString();
        document.cookie = "skip_video=" + "true" + "; " + expires + ";";
        $('.close_video').click(function(){
            $("#video_holder").fadeOut(500, function() {
                $(this).remove();
            });          
        });
    }

然后，在您的文档就绪函数中，检查cookie的值并根据需要插入视频元素：

var $skip_video;

        $(function(){
            $skip_video = read_video_cookie();

            if(!$skip_video){
                $("#video_holder").append('<iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><a class="close_video"> <i class="fa fa-angle-double-right"></i> Saltar Video </a>');
            } else {

                $("#video_holder").fadeOut(500, function() {
                    $(this).remove();
                }); 

            }      
            set_video_cookie();     
        });

更新

此方法应消除您正在处理的延迟。您还应将标记更改为：

 <article id="video_holder"></article>

Answer 2

由于您已经使用了jquery，因此有一个插件可以让您更轻松地获取和设置Cookie：

https://github.com/carhartl/jquery-cookie

设置cookie：

$.cookie('myCookie', 'value');

然后，获取cookie：

$.cookie('myCookie');

然后，在页面加载时，您可以显示您的视频是否已设置;这将要求您默认隐藏视频。使用内联样式（如果需要）：style="display:none"：

然后，在准备好文档时，如果未设置cookie，则应显示该文件：

$( document ).ready(function() {
    if( !$.cookie('myCookie') ){
        $("#video_holder").show();
        $.cookie('myCookie', 'watched');
    }
}

此外，您可能希望将vimeo网址中的autoPlay设置为false。如果容器不可见，我不确定它的行为。

Answer 3

我建议sessionStorage就像用户浏览器上的文档存储一样。所以你要这样做：

 $('.close_video').click(function(){
     $("#video_holder").fadeOut(500, function() {
         sessionStorage.setItem('viewed_my_video', true);
         $(this).remove();
     });          
 });

我还鼓励你使用javascript渲染视频，而不是从dom中删除它。这将允许你做类似的事情：

if(!sessionStorage.getItem('viewed_my_video')) {
  $('#video-holder').append('<iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}

有更好的方式通过javascript渲染html，但数字超出了这个问题的范围。（但如果你是好奇的结帐下划线/ lodash /把手）。

正如其他人所说，cookies是另一种解决方法。我赞成使用sessionStorage而不是cookie，因为它比使用解析长字符串更容易。这是关于差异的一个很好的StackOverflow答案：What is the difference between localStorage, sessionStorage, session and cookies?

如何在刷新后使元素不可见

3 个答案:

更新