HTML - 隐藏 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25435089/
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
HTML - Hide an iframe
提问by user3854743
How do I hide an iframe, but still load it? Etc. For playing a youtube song.
如何隐藏 iframe，但仍加载它？等。用于播放 YouTube 歌曲。
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="display: none;"></iframe>
This will hide the iframe, however it dosen't seems to load the iframe. (Song is not playing.)
这将隐藏 iframe，但它似乎不会加载 iframe。（没有播放歌曲。）
Thanks
谢谢
回答by YOU
Use can use width 0 , height 0 and border 0
使用可以使用宽度 0 ，高度 0 和边框 0
So updated code will be!
所以更新的代码将是！
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="width:0;height:0;border:0; border:none;"></iframe>
Added:
添加：
style="width:0; height:0; border:0; border:none"
style="width:0; height:0; border:0; border:none"
It will hide it, make media to play in background and it will also collapse it space!
它会隐藏它，让媒体在后台播放，它也会折叠它的空间！
Updated Fiddle
更新的小提琴
回答by Dan But
I was still having trouble with the iframe taking up space until I added absolute positioning. Then it stopped taking up space all together.
在添加绝对定位之前，我仍然遇到 iframe 占用空间的问题。然后它不再一起占用空间。
<iframe src="/auth/sso/" style="width: 0; height: 0; border: 0; border: none; position: absolute;"></iframe>
<iframe src="/auth/sso/" style="width: 0; height: 0; border: 0; border: none; position: absolute;"></iframe>
回答by Fueled By Coffee
Set the visibility to hidden. However the space it took up won't collapse.
将可见性设置为隐藏。但是它占用的空间不会塌陷。
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="visibility: hidden;"></iframe>
回答by Shane
The existing answers using CSS didn't work for me. Even with display:noneI ended up with a 4x4 dot where the iframe was. What I had to do was the following:
使用 CSS 的现有答案对我不起作用。即使display:none我最终在 iframe 所在的位置得到了一个 4x4 点。我必须做的是以下内容：
<iframe width="0" height="0" frameborder="0" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>
回答by user3595795
Simply set a styleof "display: none;".
只需设置style的"display: none;"。
<iframe src="your url" style="display: none;"></iframe>
回答by user3595795
By combining both answers, I use height:0;and visibility:0, as this works to hide any borders or box shadows as well.
通过结合这两个答案，我使用height:0;和visibility:0，因为这也可以隐藏任何边框或框阴影。
回答by James Paterson
You can use CSS to position the iframe off the page and out of the way. This won't leave a dot or any trace of the frame.
您可以使用 CSS 将 iframe 放置在页面之外并且不碍事。这不会留下一个点或任何框架的痕迹。
<iframe style="position: absolute; left: -900000px" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>
回答by Narkanister
Remove the src from iframe then add it back in - forced iframe to load:
从 iframe 中删除 src 然后将其添加回 - 强制 iframe 加载：
/**
* Issue: iframe doesn't show because it's in a div that is display:none on load
*
* Solution: When the button is clicked to show the hidden div:
* in the iframe, copy the url from the src attribute
* then set the src attribute to ""
* then set the src attribute back to its original value.
* This forces the iframe to load.
*/
$('#show-div-button').click(function() {
var iframe = $('iframe');
var iframe_src = iframe.attr('src');
iframe.attr('src', '');
iframe.attr('src', iframe_src);
});
回答by quine9997
iframe {
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
