一个奇怪的前端需求. 也不是很奇怪, 就是没啥思路

[lyshine]

客户刚刚让添加一个功能 . 要求把一个页面可以做成一个缩略图, 然后放在现有的右下角, 要求小视图的功能和大视图的功能一致. 这个有啥东西可以实现吗. 各位请给个思路, 谢谢

[hellomimi]

<iframe src ="https://www.v2ex.com/t/566507#reply0"></iframe>

[lyshine]

@hellomimi 这样不行的, 会导致页面的循环定义的

[lzvezr]

原网页自适应尺寸的话，就要哭了吧

[hellomimi]

结合 window.parent && window.top ，可以避免循环

[hellomimi]

@lyshine

[dremy]

如果缩略图不需要操作页面的话，可以通过 canvas 来实现

[jimliang]

可以用 html2canvas 把当前界面截成图片作为缩略图，定时更新。

[jifengg]

先吐槽一下这个奇葩设定。
这个解决方案可以通过一楼的 iframe 来解决，因为按照你的说法，这个小窗口还需要可以交互的。
如果你的客户还要求小窗口用缩略图，那就用 css 缩放整个 body

[bakedong123]

html2canvas

[redbuck]

可以搞个壳,上边俩 iframe,一个满铺,一个缩小,都展示同一页面,省的改原页面

[lyshine]

采用 iframe 的话, 可以使用 10 楼的思路. 但是小图的页面布局略惨. 采用 html2canvas , 页面的功能不完全

[yoke123]

我怎么感觉需求想实现 windows 的任务视图功能 浏览的页面和缩小的页面画面同步

[impony]

给 iframe 里的 body 加上 transform: scale(.2);

[c4f36e5766583218]

我还以为是那种视频网站的小窗播放呢。。当滚动拉倒评论区，视频就小窗播放了

[lyshine]

@yoke123 对, 完整的来说就是这种

[silencefent]

naotu.baidu.com
左下角

[hundan]

js 渲染一下当前页面 生成图片 然后放右下角 然后分析一下滚动条之类的 控制缩略图的展示 这样就行了吧