html - iFrame 最佳实践

Question

我为我正在设计的网站制作了一个大型、高清 JavaScript 密集型图像横幅。每个人对使用 iframe 以使您只产生一次加载时间有何看法？是否有 iframe 的 CSS 替代品？

这是一项正在进行中的工作。

score 1 · Accepted Answer

我还应该提到我希望横幅轮换继续移动。当访问者点击一个链接时，横幅轮换重新开始。不管用户访问的页面如何，如果“动画”一直在旋转就好了。Blockquote

好吧，在那种情况下，我强烈建议不要这样做。实现这一点的唯一真正方法是在 iframe 中包含实际的网站内容，这意味着您突然对网站有很多负面影响：由于地址栏未更改，无法轻松为网址添加书签；可访问性问题；ETC

我想你会发现大多数人不会关心它是否会重新加载。一旦访问者登陆您的网站，他们会立即惊叹于美妙的横幅，然后在他们浏览您的网站时继续忽略它 - 直到出现他们没有看到的图像并分散他们对您的内容的注意力。

保持足够随机的旋转，并且有足够的图像，人们会从他们所在的任何页面停下来查看它。

score 0 · Accepted Answer

我发现 iFrame 标头的主要挑战是调整大小。由于标题中的字体是静态大小的，因此我认为使用 iFrame 没有问题。虽然我不确定它是否真的足够密集，值得。

score 0 · Accepted Answer

好吧，浏览器似乎在第一次加载时缓存了所有七个横幅图像，然后从缓存中运行它们（对于每个后续页面）。我不认为你有问题：D

在 Firefox 中使用 Firebug 的网络监控工具试试看。

score 0 · Accepted Answer

虽然使用 IFrame 作为页面的母版页/模板可能是一件好事，但 IFrame 对可搜索性/SEO 具有已知的负面影响。

首先它也可能是不必要的，因为一旦您的图像第一次加载（并且您的网站上有大量高清图像，无论您做什么都会很慢）图像被浏览器缓存并且在用户清除缓存或执行Ctrl+之前不会重新加载F5。

score 0 · Accepted Answer

这可能在没有 CSS 的情况下也可以工作，但是如果您使用 CSS 加载背景并且您的服务器配置正确，则图像应该只下载一次。

通常浏览器会通过请求资源来请求资源，前提是该资源自上次下载后未被修改。在这种情况下，来回发送的唯一内容是 HTTP 标头，没有内容。

如果要确保图像只下载一次，请添加 .htacces 或 apache2.conf 规则以使图像在未来几天过期，这样用户只有在缓存被清除或内容过期时才会再次请求它日期过去了。在您的情况下使用 .htaccess 文件可能过多，但结果可能会有所不同。

score 0 · Accepted Answer

您可以让它加载一次主页，然后在需要时异步加载其他元素（ajax）。如果您这样做，则不需要 iFrame。这是仅加载新材料的示例。

6 回答 6