解决 iframe 加载时的白屏闪动

Kartlos Tchavelachvili

# 2009年9月6日

哇，酷

Sunny Singh

# 2009年9月20日

这正是我需要的！不知道这是可能的。

Dan

# 2009年10月21日

感谢上帝！！！！

sonja

# 2010年2月23日

谢谢您！！！！

gabi

# 2010年3月4日

为什么我的不起作用？我有 3 个页面包含 iframe：存档、当前和黑白系列

当我在 IE 7 或 8 中查看时，白色方框仍然闪烁……？？？

The Infinite Loop 博客

# 2010年5月28日

如果禁用 JavaScript，您的代码将使 iframe 保持隐藏状态。此代码仅在启用 JavaScript 时才会隐藏/显示框架。

// 使用 jQuery 修复 iframe 白屏闪动错误
// 在实际页面中将可见性设置为“隐藏”
$(“iframe”).load(function() {
$(this).css(“visibility”, “visible”);
});
$(“iframe”).ready(function() {
$(this).css(“visibility”, “hidden”);
});

R

# 2010年5月31日

你好，

您能否告诉我如何在 Fancybox 中集成此代码？

非常感谢

alf

# 2010年9月1日

运行良好！！非常感谢 - 来自奥地利的问候 - jodeldijodeldiö

135design

# 2010年11月22日

有 W3C 标准的解决方案吗？

Paul

# 2011年6月9日

爱你。这真是天才般的简单

JDPaulsen

# 2011年8月20日

它确实有效，但只运行一次。在 iframe 生成的页面加载后，如果您点击一个链接，该链接应该在 iframe 中加载另一个页面，并且由于 iframe 已经加载并可见，因此白屏闪动又回来了。

Kapy

# 2011年9月20日

在 Fancybox 中苦苦挣扎这个问题已经很久了，
转到 Fancybox 的 jacked.js

查找“<iframe”的第一次出现

Kapy

评论永久链接# 2011年9月20日

更改为

Kapy

# 2011年9月20日

不允许我发布完整的 HTML
id=”fancybox-frame” name=”fancybox-frame’+(new Date).getTime()+'” frameborder=”0″ hspace=”0″ allowtransparency=”true” style=”visibility:hidden;” onload=”this.style.visibility = \’visible\’;” scrolling=”‘+e.scrolling+'” src=”‘+d.href+'”

Kapy

# 2011年9月20日

您实际上需要做三件事
使 iframe 不可见，在 CSS 中使用“visible:hidden”
使 iframe 允许透明，allowtransparency=”true”
使它显示的 body 具有透明背景，“background-color:transparent”

Pest

# 2011年11月11日

非常感谢！这非常有效！令人难以置信的是，Internet Explorer 9 在页面加载期间仍然为 iframe 显示白色背景！难以置信。

SW

# 2011年11月26日

我在这里找到了另一个有效的解决方案
http://swsharinginfo.blogspot.com/2011/11/avoid-iframe-white-flash-issue-while.html

rttmax

# 2011年12月8日

谢谢。太简单了……

Mario

# 2012年3月28日

谢谢一百万遍。我浪费了几个小时试图解决这个问题。一个简单有效的解决方案。

migue

# 2012年7月15日

谢谢！！！我花了将近 2 个小时自己尝试解决，但这帮了大忙！！谢谢

Avi

# 2012年11月4日

谢谢！！！你帮了我很大的忙。

Trung

# 2012年11月22日

太棒了！非常感谢！

antyal

# 2012年11月23日

谢谢！这非常有帮助。

Abaxsoft

# 2013年2月14日

感谢代码
我刚刚浏览了评论，有人建议使用 jQuery 作为替代方案，说您的解决方案需要启用 JavaScript
我想知道如果禁用了 JavaScript，您将如何使用 jQuery
此外，是否有人有在 Flash 中加载 iframe 的解决方案？
我正在寻找一些方法来保护我的页面免遭盗取

Alex

评论永久链接# 2013年4月21日

因为隐藏也是用 jQuery 完成的。这意味着如果没有 JavaScript，它永远不会被隐藏，也永远不会显示，它只是“存在”并伴随白屏闪动。但是，为没有 JavaScript 的用户编写代码不再是有效的事情，每个人都启用了 JavaScript，除了最偏执的人，而这些人不是您希望访问您的网站的人，除非您运营某种阴谋论网站，哈哈。明白了吗？

Brian

# 2013年4月3日

谢谢！

Brandon

# 2013年5月22日

完美。谢谢！

Booki

# 2013年8月30日

您是我的英雄！！！！非常感谢，我找了很久才解决这个问题！;-)

Abhigyan

# 2013年11月9日

有没有办法在加载 CSS 之前优先加载 iframe……？

pankaj

# 2016年12月12日

您好，您找到解决方案了吗？？？

我也需要在我的网站上使用它，我想隐藏 iframe 中的一些 div，然后显示 iframe 的内容

我的代码是

function RemoveExtraDiv(){

            //Hides the breadcrumb from the iframe
        $("#IPFrame").contents().find("#header").css({"display": "none"});
        $("#IPFrame").contents().find("#wpadminbar").css({"display": "none"});
        $("#IPFrame").contents().find(".footer_container").css({"display": "none"});
        $("#IPFrame").contents().find(".footer-bottom").css({"display": "none"});
        $("#IPFrame").contents().find(".wrapper").css({"padding": "0px 20px"});
        $("#IPFrame").contents().find("#embeded_menu").css({"display": "block"});

        }
        </script>


         <div class="codegena_iframe"><iframe id="IPFrame" onload='RemoveExtraDiv(); ' src="http://bbomplusfranchising.com/test/shop/" height="750" width="100%"  style="background:url('http://codegena.com/wp-content/uploads/2015/09/loading.gif') white center center no-repeat;border:0px; " name="my frame "></iframe></div><style>.codegena_iframe{position:relative;padding-bottom:56.25%;height:0;overflow: hidden;max-width:100%;}.codegena_iframe iframe{position:absolute;top:0;left:0;width:101%;height:100%;}</style>

AJ Boet

# 2014年9月19日

完美！简短、简单.. 太棒了！

Maria

# 2016年11月17日

非常感谢分享！

Jo King

# 2020年10月20日

禁用 JS（出于隐私或安全原因）的用户将看不到 iframe 内容

riderQ45

# 2021年11月12日

您真是个天才！！
谢谢=)

评论

发表评论 取消回复

发表评论取消回复