Question

我正专门为iPad / mobile-Safari创建一个网络应用程序。主页是一个普通的HTML / CSS页面，有3个主要部分。但是，一旦您点击3个主要按钮中的任何一个，您就会被定向到一个由2个iFrame构建的页面（一个在Nav上面，一个在底部用于内容）

问题是，在加载这三个页面之前，有一个快速闪烁的白色，然后加载页面。我试图隐藏iframe的可见性样式，然后onLoad将其更改为“可见”并且有效。但是当iFrame构造的页面首次加载时，它只工作一次。一旦加载并点击该页面上的链接，白色闪光灯就会恢复，因为iFrame已经加载，因此它已经可见。

我尝试使用背景颜色（也尝试了内联样式）向iframe添加css样式，但同样的事情发生了。关于如何解决它的任何想法？谢谢！

Answer 1

你可以做这个骗子：

<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>

在内容中，您可以捕获所有链接和表单：

document.getElementsByTagName("a").addEventListener("click", function(e){
    window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});

说明：

第一次隐藏您的iframe，您可以看到主页的背景（不是iframe的白色）
加载后，Javascript会显示iframe，您可以看到iframe的内容和背景。
点击iframe内的链接时，会触发一个触发器，Javascript会再次隐藏iframe。

我遇到了这个问题，并且整整一天都在尝试修复，但除了上述方法我不能。您可以在Chrome，Firefox和其他浏览器上遇到此问题，而不仅仅是在Safari Mobile上。

Answer 2

我认为与KimKha一样。但是＆＃34;可见性＆＃34;有时效果不好，所以我认为使用＆＃34;不透明度＆＃34;更好。

<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>

Answer 3

我遇到了这个问题，发现了许多解决方案，例如KimKha提到的。

这些解决方案都无法协助iframe进行进一步的页面转换，而将其隐藏确实不是一个好的解决方案。

由于反复无常，我想出了以下解决了IOS Webkit iFrame过渡白色闪光问题的方法，具有讽刺意味的是，这是一个简单的解决方案：

只需将其添加到您的CSS

html{background:#000}

将颜色更改为所需的颜色。

当您的iframe调用另一个页面时，IOS Webkit的最终问题似乎是什么，IOS会暂时从当前页面中删除正文，然后再渲染新页面中的内容。通过强制HTML具有背景色（默认自然为白色），可以解决白色闪烁。

还请注意，如果您的服务器设置为不允许缓存提供样式的.css文件，那么您将总是闪烁。

在Apache中确保查看缓存

ExpiresByType text/css "access plus 30 days"

移动野生动物园白色背景

3 个答案: