使用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等值

額……這個懶得試了，但這個比上面的優雅很多~感興趣的大佬可以自己搞一搞哈哈哈哈