jQuery 或 CSS 显示外部页面的缩略图答案

【问题标题】：jQuery or CSS to display thumbnail of external pagejQuery 或 CSS 显示外部页面的缩略图
【发布时间】：2011-06-25 22:45:36
【问题描述】：

我正在尝试显示外部网页的缩略图，类似于 Chrome 在打开新标签页时显示最近收藏夹的方式。我使用这样的对象元素：

<object class="page-thumbnail" type="text/html" src="http://www.foo.com/endpoint.html">
   <p>page 1</p>
</object>

是否有一个很好的 jQuery/jQuery 插件或 CSS 示例来说明如何做到这一点？例如，我查看了 -webkit-transform，但似乎无法使其正常工作。

【问题讨论】：

我应该提一下，我对这个用例没有安全问题，也不需要跨浏览器兼容。我见过使用 iframe (webkit-transform) 的解决方案，但这似乎并没有转化为对象元素。
你到底为什么要使用对象元素？？？否则，Duopixel 的答案应该可以正常工作。
... 严格遵守 XHTML。

【解决方案1】：

可以创建看起来像缩略图的东西，但问题是您无法通过 javascript 控制它们。此外，它只能在 Firefox 和 Webkit 上运行。

这只是在 iFrame 上应用的 css 缩放变换。

【讨论】：

这是我在 webkit 转换 + iframe 中看到的技巧。将我的
不要使用对象，它是 MS 专有的。在您的代码中，只需将替换为 <object> 就可以了。</object>
看起来 iframe 是我需要的。但是，
IE9 现在也支持 css 2D 转换。因此，对于您的示例，添加规则“-ms-transform: scale(0.5, 0.5) translate(-50%, -50%);”将显示缩小的 iframe。参考：msdn.microsoft.com/en-us/ie/hh393506#_CSS3_2D_Transforms

【解决方案2】：

我不这么认为，不。

首先没有 JavaScript 访问 HTML“缩略图”，其次尝试从外部 URL 获取缩略图将是一个安全问题。

您必须create the thumbnails on server side 才能执行此操作。没有其他办法。

【讨论】：