div中的其他网站（带班次）

Question

我正准备自定义主页到我的浏览器。我想几个div显示我最喜欢的网站。但是，由于我没有足够的空间，我想只显示带有主要部分的小碎片。有没有办法把HTML摘录？我的意思是显示器，例如，谷歌放在一个框架，只显示谷歌涂鸦和条形显示（向右和向下移动数十个像素）。我使用此代码，但我不能添加正确和向下移位：

<iframe src="http://www.google.com" style="width: 90%; height: 300px"></iframe>

我将不胜感激任何建议。

警告：谷歌网站只是一个例子。我需要在几个div中放入完全不同的页面。我并不关心静态屏幕截图，而是关于页面的全部工作。

我制作的图形描绘了我的意思：

Answer 1

我创造了一个jsfiddle - 我相信的是 - 你正在寻找的东西：http://jsfiddle.net/ctwheels/3g47mjtk/

将iframe的宽度和高度设置为网页大小，然后将其剪切为您想要的大小。如果您愿意，可以删除iframe代码中的scrolling="no"。

<强> HTML

<div id="outerdiv">
    <div id="innerdiv">
        <iframe width="600" height="660" src="http://www.wikipedia.org" scrolling="no" frameborder="0"></iframe>
    </div>
</div>
<p>Set #outerdiv to size of #innerdiv. Blue background is so you can see what has happened to the iframe</p>

<强> CSS

#outerdiv {
    position: relative;
    width:300px;
    height:300px;
    background-color:blue;
}
#innerdiv {
    position: absolute;
    top:-160px;
    left:-200px;
    clip:rect(160px 400px 360px 200px);
}

Answer 2

如果Chrome是您的浏览器，那么我相信有这样的功能可以获取您喜爱的网站内置于其扩展业务中的截图/快照（实际上只是大量的javascript和内容）。可能需要考虑为Chrome创建一个扩展程序，该扩展程序将成为您的默认/新标签商家（Chrome商店中已有很多商品）。