移动safari白色背景

Question

我正在创建一个专门用于iPad/mobile-Safari的web应用程序。主页是一个普通的HTML/CSS页面，有3个主要部分。但一旦你点击3个主要按钮中的任何一个，你就会被引导到一个由2个iFrames构成的页面(一个在顶部用于导航，一个在底部用于内容)

问题是，在加载这3个页面之前，有一个快速的白色闪光，然后页面加载。我尝试隐藏iframe的可见性样式，然后onLoad将其更改为“visible”，并成功了。但它只工作一次，当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也是如此。但是“可见性”有时不能很好地工作，所以我认为使用“不透明度”更好。

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

Answer 3

我遇到了这个问题，找到了很多像KimKha提到的解决方案。

没有一种解决方案有助于在iframe中进行进一步的页面转换，并且隐藏它确实不是一个好的解决方案。

通过大量的尝试和错误，我想出了以下方法来解决我的IOS webkit iFrame转换白色闪存的问题，讽刺的是，这是一个如此简单的解决方案：

只需将此代码添加到您的CSS

html{background:#000}

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

IOS webkit的最终问题看起来就是当你的iframe调用另一个页面时，IOS会在呈现新页面的内容之前从当前页面中删除正文一秒钟。通过强制HTML使用背景颜色(默认设置自然是白色)，这解决了白色闪烁的问题。

还要注意，如果您的服务器被设置为不允许缓存提供样式的.css文件，那么您将始终得到闪烁。

在apache中，为了确保缓存，请查看

ExpiresByType text/css "access plus 30 days"