建议我使用Jquery包进行网站预览

时间:2016-06-01 10:47:11

标签: javascript jquery html

我正在寻找一个用于网站预览的jquery包。

网站预览基本上是当您在输入字段中添加网站网址时,它应该显示该网站的简要描述(如Facebook提要)

我试过https://github.com/stephan-fischer/jQuery-LiveUrl。但在某些情况下它无法正常工作。

任何人都可以建议我一个更好的方案。

1 个答案:

答案 0 :(得分:-1)

如果您确实想要预览实时网页,则必须使用iframe。如果你只是想要一个图像预览,富尔维奥的建议将起作用,但不会显示一个"直播"预览(即,没有您通常会看到的动画,如果用户登录到页面,您将只看到首页等)。实际上可以缩放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>

玩得开心:)

复制并粘贴到浏览器的网址栏中进行预览:

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>

自:

jQuery Webpage Preview

这样做的简单方法是使用:

http://www.jqueryscript.net/other/jQuery-Plugin-For-URL-Live-Preview-urlive.html