Question

我正在尝试使用bootstrap网站，制作iframe（如果可能，请使用其他/更好的（？）选项替换）仅在页面的部分/部分处于活动状态时加载/显示。
我的页面是一个长页面，其中包含部分（单页index.html），其中每个部分都包含一个加载整个网站的iframe。

我的部分的CSS：

section {
padding-top: 50px; / * Margin menubar * /
height: 100vh; / * 100% of the visible field * /

}

我遇到的问题是，现在所有的iframe都会同时加载并窃取焦点，并且页面在加载时会上下跳动。
当一切都装完后，你就来到了中心或两个部分之间它看起来非常糟糕，并且消耗了不必要的带宽。

第0节 - rss（页面应始终从这里开始）
第1节 - 路由器
第2节 - 工作邮件1 第3节 - 工作邮件2
第4节 - NAS
第5节 - Synology DiskStation
第6节 - Plex

<! - Plex section ->
<Section id = "plex">
<Iframe style = "position: absolute; top: -9999em; visibility: hidden;" onload = "this.style.position = 'static'; this.style.visibility = 'visible'; ' src = "http://plex.tv/web/app" href = "http://plex.tv/web/app" width = "100%" height = "100%"> </ iframe>
</ Section>
<! - End Plex section ->

html5，javascript，jQuery，ajax，欢迎任何事情（exept flash），我死路一条。

我希望iframe加载一个本地空白页直到它可见，当我点击导航栏链接时，页面向下滚动到一个achorpoint（部分）然后我想要加载iframe的部分。如果我滚动到另一部分我希望第一个iframe卸载或加载空白页面和新部分iframe加载它的内容..所有iframe都有不同的页面加载，并在页面的不同页面锚点。

[链接到示例jfiddle] [1]

[1]: http://jsfiddle.net/9x0m004L

Answer 1

你能解释一下你想做什么吗？如果您希望从上到下连续加载您的部分而不滚动：

var urls = ["google.com","google.com","google.com","google.com"];
$(document).on("iframeLoad", function(){
    if(urls.length > 0) {
        var newDiv = $('<div class="divWrap"/></div>').appendTo(document.body);
        $("<div>title</div>").appendTo(newDiv);
        var newIframe = $('<iframe src="'+urls.shift()+'"></iframe>').appendTo(newDiv);
        newIframe.load(function(){
            $(document).trigger("iframeLoad");
        });
    }
});
$(document).trigger("iframeLoad");

http://jsfiddle.net/vp96xx3z/

部分不可见/活动时隐藏iFrame

1 个答案: