javascript - 在部分不可见/事件时隐藏 iFrame

Question

我在引导网站上尝试制作一个 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 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，任何东西都是受欢迎的(flash 除外)，我走投无路了。

---

我希望 iframe 加载本地空白页面，直到它可见，当我单击导航栏链接时，页面向下滚动到一个 achorpoint(部分)，然后我希望 iframe 加载该部分。如果我滚动到另一个部分我希望第一个 iframe 卸载或加载空白页面，新部分 iframe 加载它的内容..所有 iframe 都有不同的页面要加载并且位于页面的不同页面 anchor 上。

[链接到示例 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/