jQuery 网页预览 [重复]答案

【问题标题】：jQuery Webpage Preview [duplicate]jQuery 网页预览 [重复]
【发布时间】：2011-03-10 22:06:04
【问题描述】：

有没有人知道一个插件可以让你滚动锚链接并查看网页的预览？

所以基本上我们可能在页面上有一个链接说 www.mysite.com，当您滚动链接时，我希望看到该网站的预览。

我知道有一些插件可以向您显示图像文件，但我正在寻找可以预览实时页面的东西。

编辑

我想查看页面的缩略图。

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

qTip 是 jQuery 框架的工具提示插件。它是跨浏览器、可定制且功能齐全。

http://craigsworks.com/projects/qtip/demos/content/thumbnail

更新：

qTip 1.0 即将过时...查看qTip2 preview。

【讨论】：

+1，我喜欢。让我玩它，然后回复你
这些缩略图似乎是静态屏幕截图。只需将鼠标悬停在 MySpace 上，然后单击链接即可查看真实页面。
@Gert G，它正在使用 snapr > 并将页面排队并稍后提供。不确定这是否足够动态
不能在内联网上工作。 ;)

【解决方案2】：

如果您确实想要预览实时页面，则必须使用 iframe。如果您只想要图像预览，Fulvio 的建议会起作用，但不会显示“实时”预览（即，没有您通常会看到的动画，如果用户登录到页面，您只会看到前面页等）。可以实际缩放 iframe 的内容，使其成为缩略图，从而达到您想要的效果。例如：

<html>
<head>
<!--[if IE]>
<style>
#frame {
    zoom: 0.2;
}
</style>
<![endif]-->
<style>
#frame {
    width: 800px;
    height: 520px;
    border: none;
    -moz-transform: scale(0.2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.2);
    -webkit-transform-origin: 0 0;
}
</style>
</head>
<body>
<iframe id="frame" src="http://www.bing.com">
</iframe>
</body>
</html>

玩得开心:)

复制并粘贴到浏览器的 URL 栏中进行预览：

data:text/html,<html><head><!--[if IE]><style>iframe{zoom:0.2;}</style><![endif]--><style>iframe{width:800px;height:520px;border:none;-moz-transform:scale(0.2);-moz-transform-origin:0 0;-o-transform:scale(0.2);-o-transform-origin:0 0;-webkit-transform:scale(0.2);-webkit-transform-origin:0 0;}</style></head><body><iframe src="http://www.bing.com"></iframe></body></html>

【讨论】：

+1 不仅因为它是一个很好的答案，而且还因为能够在缩小版的 Google 中搜索“hello world”的新颖性。
+1 并且仍然可以单击按钮。 :) 我认为这可能是要走的路，但需要先玩
在 90% 的情况下它会比基于图像的预览慢，因为它必须加载整个网页。根据您的用途，您可能希望从任何可用服务（例如 qtip 使用的服务）加载缩略图，然后在完成加载后将其淡入 iframe。无论如何，你打算用它做什么？
并为数据 +1：URL 栏中的 HTML ......以前从未见过！甜！
Google 最近更改了其 http 标头以添加 x-frame-headers: sameorigin 标头，从而阻止此解决方案工作。我将更新示例以改用 bing。

【解决方案3】：

Free Website Thumbnail Services 提供更多缩略图服务。但它们可能仍会缓存图像，就像 WebSnapr 一样。

【讨论】：