使用CSS對iframe進行裁剪

2021-10-05 10:43:30 字數 1460 閱讀 9647

今天做需求的時候,前端需要使用iframe嵌入乙個bi上的表,但那張表最下邊有些不相干的資訊需要裁掉。

很簡單的需求,但當時還真沒立刻想出來怎麼搞【過了幾秒後才想起來】

方法也很簡單,就是在iframe外邊再套一層,使用overflow:hidden

這種靈機一動容易忘,在部落格裡寫下來這個小想法

用的vue,按照vue的格式寫了。

很簡單。

效果:裁掉最後50px

style

="height

:500px;

overflow

:hidden

">

src=

""style

="weight

: 100%;

height

:550px

"/>

div>

效果:裁掉最後50px + 右邊50px

style

="height

:500px;

width

:500px;

overflow

:hidden

">

src=

""style

="weight

: 550px;

height

:550px

"/>

div>

嗯……雖然這次需求沒碰到,但保不住之後有可能會碰到……

提點思路吧。

切掉上面

style

="height

:500px;

overflow

:hidden

">

style

="position

:absolute;

top:-100px

"/>

div>

但這樣就不能滾動了,有展示不全的問題,不完美。

下面這個更完美一些。

style

="height

: 100px;

overflow

: auto;

">

style

="height

: 600px;

overflow

:hidden

">

style

="position

:absolute;

top:-100px

"/>

div>

div>

又套了一層。是的,正如那句老話,沒有什麼問題是不能通過新增一層來解決的(大霧

同理切左邊也可以用這個方法,left = -100px

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

jquery對iframe的元素進行遍歷

先是打算遍歷時間容器,對其進行修改,後面發現友言是嵌入frame,由於涉及到跨域問題,所以無法對其dom節點進行修改 這個是在同乙個域下,可以訪問 這個是在不同網域名稱下,不能跨域訪問其中的元素 如果是在同乙個域下。那麼是可以修改frame裡頭元素的值。time ago window.frames ...

用CSS對網頁進行布局

今天學習了用css對網頁進行簡單的布局,感覺還不錯,下面來分享一下。首先用div給頁面分塊是基礎,網頁布局就是將網頁合理的分成乙個乙個塊。接下來寫css層疊樣式,給每個要定義樣式的div定義乙個class或id,在對應的class裡面寫好樣式,這裡最主要的用到的屬性有margin,padding,w...

如何對css檔案進行整理

1.html元素的定義 包括如ul等一些標籤的樣式reset 2.定義通用樣式庫 3.先樣式再布局後模組。具體做法是 1 把跟顏色有關的樣式提取出來 如字型 鏈結 邊框 背景之類 2 把跟整體布局有關的樣式進行整理 主要是分欄的width 理解寬度 盡可能地少用寬度!有何好處?由於ie6跟標準瀏覽器...