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

How do i load a HTML page off screen and then slide it into view?

本文关键字：然后 视图 页面 屏幕 HTML 加载      更新时间：2023-09-26

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

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

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

所以我想的是在屏幕外标签中加载下一页，加载后，将其滑入视图，然后开始在屏幕外加载下一张幻灯片。当显示持续时间结束时，将下一页滑入视图并开始加载下一页，等等…

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

还有一个附带说明——当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>

如果urlhttp://example.com/PlayNext是一个从数据库中检索html的url，那么您应该采取以下步骤：

1.您需要使用ajax((从数据库中获取html

2.在iframe 中加载该html

3.在视口外iframe的位置(位置：绝对；左：-100%；(

4.加载iframe后，将其滑入视口，将旧名称滑出视口，然后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加载另一个网站的一些好处

1( Iframes实现跨域起源策略(图像、脚本和样式不实现(。这对于相对安全地从其他域名中提取网站/内容非常有用。基本上，这允许了一个优势，即能够直观地显示来自其他域的数据，而不必让它们以无限制的访问权限在您的页面上到处乱动(就像JSONP一样(。

接下来是：

2( 您可以从iframe中发送多种类型的资源，而不仅仅是某些mime类型(相对而言，您仅限于application/javascript、application/x-javascript、text/css、text/xml、image/png、image/jpeg、image.gif以及脚本、XHR、图像和源(。例如，如果我想向您展示PDF，我可以打开一个iframe，让Adobe Reader插件向您展示该文件。此外，在同一个域中，如果我想将脚本、样式和图像一起传输(在页面上内联，图像必须是数据URI(，我可以使用iframe来实现这一点(如果它在同一域、端口和协议中，我也可以使用JavaScript来访问它(。

相关文章：