Question

我有一个小型数字标牌网络应用程序，其中显示的所有页面都是用HTML创建的，并存储在数据库中。

我需要制作一些可以显示我所有幻灯片的播放器。我有一个要调用的URL，它会显示下一页：http://example.com/PlayNext这将返回给定上下文中的下一张幻灯片。

现在我只有一个超时，每10秒重新加载一次页面。我想让玩家获得更加流畅的体验，并从客户端加载所有内容，而无需回发到服务器。

所以我的想法是在屏幕外标签中加载下一页，当加载它时，将其滑入视图，然后开始加载屏幕下一张幻灯片。当节目持续时间过去了，然后将下一页滑入视图并开始加载下一页，等等.....

我想知道实际上是如何在屏幕上加载的东西。我知道我可以将溢出设置为隐藏，只需将其放置在屏幕上3000像素。但是，如何使连续流动能够让我显示我想要的所有页面呢？

还有一个注意事项 - 当div不再使用时，我如何清理div？所以我的浏览器没有泄漏内存？

修改这是当前的“播放器”，它是ASP.NET Razor语法显示下一页url等。这是我想要更改为在屏幕外加载它div：

    <script type="text/javascript">  
    var duration = @ViewBag.Duration;  
    var nextPage = "@ViewBag.Address";
    window.setTimeout(reloadbrowser, duration);    

    function reloadbrowser()
    {        
        var path = $.ajax({
        url: "/page/Ping", 
        success: success,
        error: reloadbrowser,
        timeout:5000
        });   
    }

    function success()
    {
      window.location.href = nextPage;
    }
    </script>
</head>
    <body style="height:100%">@Html.Raw(ViewBag.BodyXHTML)</body>   
</html>

Answer 1

如果网址http://example.com/PlayNext是从数据库中检索html的网址，那么这些是您应该采取的步骤：

1。您需要使用ajax()

从数据库中获取html

2。在iframe

中加载html

3。在视口之外的位置 iframe （位置：绝对;左：-100％;）

iframe 加载后

4。，将其在视口中滑动，将旧的滑动到外部，然后remove()旧的

所以你想出这样的事情：

$(function(){
    function getData(){
        clearTimeout(window.theInterval);
        $.ajax({
            url: "http://example.com/PlayNext",
            type: "POST",
            timeout:5000,
            success : function (databack) {
                var iframe=$('<iframe>'+databack+'<iframe/>', {
                    style:'position:absolute; left:-100%;',
                    load:function(){
                        var that=this;
                        $(this).animate({
                            left:0
                            },500);
                        $('iframe').not(this).animate({
                            left:'-100%'
                            },500,function(){
                                $('iframe').not(that).remove();
                            });
                        }
                    });
                $('body').append(iframe); 
                window.theInterval=setTimeout(function(){
                    getData();
                    },10000);
                },
            error:function(jqXHR, status, message){
                getData();
                }
            });
    }
    getData();
});

注意：您必须以此答案为基础来匹配您的项目

为什么要使用iframe而不是div

我将引用使用iframe从另一个网站加载网站的一些好处answer

1）iframe实现跨域原始策略（图像，脚本和样式不实现）。这对于相对安全地从其他域名中提取站点/内容非常有用。基本上，这允许能够直观地显示来自其他域的数据，而不会让他们无限制地访问您的页面（就像JSONP能够做的那样）。

接下来就是：

2）您可以从iframe中发送多种类型的资源，而不仅仅是某些mime类型（您相对受限于应用程序/ javascript，application / x-javascript，text / css，text / xml， image / png，image / jpeg，带脚本的图像/ gif，XHR，图像和来源）。例如，如果我想向您显示PDF，我可以打开一个iframe，然后让Adobe Reader插件显示该文件。另外，在同一个域中，如果我想将脚本，样式和图像一起管道化（在页面上内嵌，图像必须是数据URI），我可以使用iframe完成此操作（如果它＆＃39;在相同的域，端口和协议中，我也可以使用JavaScript访问它。

如何在屏幕上加载HTML页面然后将其滑入视图？

1 个答案: