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

Question

I have a small digital signage web application where all the pages shown is created in HTML and stored in a database. 我有一个小型的数字标牌网络应用程序，其中显示的所有页面都是用HTML创建的，并存储在数据库中。

I need to make some sort of player that will display all my slides. 我需要制作某种可以显示我所有幻灯片的播放器。 I have a URL to call that gives me the next page to show: http://example.com/PlayNext This will return the next slide in the given context. 我有一个要调用的URL，该URL使我可以显示下一页： http : //example.com/PlayNext这将返回给定上下文中的下一张幻灯片。

Right now i just have a timeout that will reload the page every 10 seconds. 现在，我只是有一个超时，它将每10秒重新加载一次页面。 I want to make a much more smooth experience with the player, and load everything from client, without postbacks to server. 我想与播放器进行更流畅的体验，并加载客户端所有内容，而无需回发到服务器。

So what im thinking is to load the next page in an off screen tag and when thats loaded, slid it into view, and then start loading the next slide off screen. 因此，我的想法是将下一页加载到屏幕外标记中，然后在加载时将其滑入视图，然后开始加载下一页滑出屏幕。 When the show duration has passed, then slide the next page into view and start loading the next one, etc..... 放映时间结束后，将下一页滑入视图并开始加载下一页，依此类推。

What im wondering is how actually to do this off screen loading thing. 我想知道的是实际上如何在屏幕外加载东西。 I know i can set overflow to be hidden and just place it 3000 px off screen. 我知道我可以将溢出设置为隐藏并将其放置在屏幕外3000 px处。 But how do i make the continuous flow that will allow me to show all the pages i want ? 但是，如何使连续的流程显示我想要的所有页面呢？

And a side note - how do i clean up the divs when they no longer should be in use? 还有一个注意事项-当div不再使用时如何清理div？ so that my browser isnt leaking memory? 这样我的浏览器就不会泄漏内存？

edit This is the current "player", it is ASP.NET Razor syntax to show the next page url etc. this is what i want changed to load it in an off screen 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

if the url http://example.com/PlayNext is a url which retrieves the html from the database then these are the steps you should take: 如果URL http://example.com/PlayNext是一个从数据库检索html的URL，则应采取以下步骤：

1. you need to get the html from the database using ajax() 1.您需要使用ajax（）从数据库获取html

2. load that html inside an iframe 2.在iframe中加载该html

3. position that iframe outside of viewport (position:absolute; left:-100%;) 3.将iframe定位在视口之外（position：绝对； left：-100％；）

4. after the iframe is loaded, slide it inside the viewport and the old one outside and then remove() the old one 4.加载iframe后，将其滑动到视口中，将旧的滑动到外部，然后remove()旧的

so you'd come up with something like this: 所以你会想到这样的事情：

$(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();
});

NOTE: you must build on this answer to match your project 注意：您必须基于此答案才能匹配您的项目

why use an iframe and not a div 为什么要使用iframe而不是div

I'm gonna quote some benefits of using an iframe for loading websites inside another one from this answer 我将引用使用iframe从此答案中将网站加载到另一个网站中的一些好处

1) Iframes implement the cross domain origin policy (images, scripts, and styles do not). 1）iframe实施跨域来源政策（图片，脚本和样式则没有）。 This can be useful for pulling in sites / content from other domain names relatively safely. 这对于相对安全地从其他域名提取站点/内容很有用。 Basically, this allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access (like something like JSONP would be able to do). 基本上，这具有以下优点：可以直观地显示来自其他域的数据，而不会让它们无限制地访问整个页面（例如JSONP之类的东西）。

and the next thing is: 接下来是：

2) You can send multiple types of resources from within an iframe, not just certain mime-types (you're relatively limited to application/javascript, application/x-javascript, text/css, text/xml, image/png, image/jpeg, image/gif with scripts, XHR, images, and sources). 2）您可以从iframe中发送多种类型的资源，而不仅限于某些mime类型（您相对限于application / javascript，application / x-javascript，text / css，text / xml，image / png，image / jpeg，包含脚本的图像/ gif，XHR，图像和源）。 For instance, if I want to show you a PDF, I can open an iframe and let the Adobe Reader plugin show you that file. 例如，如果要向您显示PDF，则可以打开iframe，然后让Adobe Reader插件向您显示该文件。 Additionally, in the same domain, if I want to pipeline a script, style, and image all together (inline on the page, image would have to be data URI), I can accomplish this with an iframe (and if it's in the same domain, port, and protocol I can access it with JavaScript as well). 另外，在同一个域中，如果我想将脚本，样式和图像全部一起管道化（在页面上内联，图像必须是数据URI），则可以使用iframe来完成此操作（如果它位于同一位置）域，端口和协议，我也可以使用JavaScript访问它）。

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

问题描述

1 个解决方案

解决方案1
0 2015-07-21 13:33:27

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

问题描述

1 个解决方案

解决方案1 0 2015-07-21 13:33:27

解决方案1
0 2015-07-21 13:33:27