javascript 如何预加载 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32547844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to preload iframes
提问by NBI
I am having multiple iframes to display data in a page.
I want to preload the next 3 iframes while viewing current view. am doing like the below:
我有多个 iframe 来在页面中显示数据。
我想在查看当前视图时预加载接下来的 3 个 iframe。我正在做如下：
I will hide the all iframes and set the source for it.
When I clicked on a particular view I will show it and in background I will load the next 3 iframes.
while doing this, some loading is showing in browser tab and it doesn't look good at all.
我将隐藏所有 iframe 并为其设置源。
当我单击特定视图时，我将显示它，并在后台加载接下来的 3 个 iframe。
执行此操作时，浏览器选项卡中会显示一些加载，并且看起来一点也不好看。
How to get rid of this loading in browser for usability?
如何摆脱浏览器中的这种加载以提高可用性？
回答by monkeythedev
I've answered a similar question there:
我在那里回答了一个类似的问题：
https://stackoverflow.com/a/46121439/1951947
https://stackoverflow.com/a/46121439/1951947
In your case it would be:
在您的情况下，它将是：
<link rel="preload" href="https://example.com/widget.html" as="document">
and then you can use your iframe as usual:
然后你可以像往常一样使用你的 iframe：
<iframe src="https://example.com/widget.html"></iframe>
回答by GottZ
you cannot get rid of the browser loading indication.
why don't you just create iframe elements using DOM operations like the following..
您无法摆脱浏览器加载指示。
为什么不直接使用 DOM 操作创建 iframe 元素，如下所示..
you need a.. "kind of" invisible container for preloading iframes. you need to put iframes into the documents body or else they would not start loading.
您需要一个..“某种”隐形容器来预加载 iframe。您需要将 iframe 放入文档正文中，否则它们将无法开始加载。
var container = document.createElement("div");
// this will prevent scrollbars in the container
container.style.overflow = "hidden";
// this ensures the container is always in the visible area
// sometimes browser don't load what's out of the viewscope so this would help against that
container.style.position = "fixed";
// this will turn the container "click through"
container.style.pointerEvents = "none";
// this will render the div invisible:
container.style.opacity = 0;
// this will try to put the container behind the <body> element:
container.style.zIndex = -1;
// this will remove any performance loss when scrolling:
container.style.willChange = "transform";
document.body.appendChild(container);
var framePreload = function (url) {
var frame = document.createElement("iframe");
frame.src = url;
container.appendChild(frame);
return frame;
};
var frame = framePreload("https://www.youtube.com/embed/aqz-KE-bpKQ?autoplay=1");
from there you have plenty of options. i'd recommend using replaceChild on the parent element of the original frames so you can just swap them with the preloaded ones.
something like this: originalFrame.parentNode.replaceChild(frame, originalFrame);
you also need to re set the classnames etc.
well instead of doing document.createElement("iframe")you could also use cloneNode to copy all of the frames attributes to the new frames.
从那里你有很多选择。我建议在原始框架的父元素上使用 replaceChild，这样您就可以将它们与预加载的元素交换。
像这样：originalFrame.parentNode.replaceChild(frame, originalFrame);
您还需要重新设置类名等。
而不是这样做，document.createElement("iframe")您还可以使用 cloneNode 将所有框架属性复制到新框架。
