使用CSS对iframe进行裁剪

背景

今天做需求的时候，前端需要使用iframe嵌入一个BI上的表，但那张表最下边有些不相干的信息需要裁掉。

很简单的需求，但当时还真没立刻想出来怎么搞【过了几秒后才想起来】

方法也很简单，就是在iframe外边再套一层，使用overflow:hidden

这种灵机一动容易忘，在博客里写下来这个小想法

实现

用的Vue，按照Vue的格式写了。

很简单。

效果：裁掉最后50px

<div style="height:500px;overflow:hidden">
	<iframe src="http://whatever-you-want.com/view/whatever-you-need" style="weight: 100%;height:550px"/>
</div>

效果：裁掉最后50px + 右边50px

<div style="height:500px;width:500px;overflow:hidden">
	<iframe src="http://whatever-you-want.com/view/whatever-you-need" style="weight: 550px;height:550px"/>
</div>

那我要是想切左边跟上边呢

嗯……虽然这次需求没碰到，但保不住之后有可能会碰到……

提点思路吧。

思路一：Position Absolute + top/left

切掉上面

<div style="height:500px;overflow:hidden">
	<iframe style="position:absolute;top:-100px"/>
</div>

但这样就不能滚动了，有展示不全的问题，不完美。

下面这个更完美一些。

<div style="height: 100px;overflow: auto;">
	<div style="height: 600px;overflow:hidden">
		<iframe style="position:absolute;top:-100px"/>
	</div>
</div>

又套了一层。是的，正如那句老话，没有什么问题是不能通过添加一层来解决的（大雾

同理切左边也可以用这个方法，left = -100px

思路二：修改scrollTop等值

额……这个懒得试了，但这个比上面的优雅很多~感兴趣的大佬可以自己搞一搞哈哈哈哈