iframe resizer

介紹

iframe-resizer庫旨在消除使用 iframe 的痛點。它將調整您的 iframe 大小以匹配內容的大小，然後監視 iframe 以確保它始終是完美的大小。

可靠的尺寸調整

由於瀏覽器不提供單一一致可靠的方法來計算內容大小，因此iframe-resizer會在每次偵測到變更時自動檢查您的頁面並為您​​的內容選擇最佳值。

高效能

為了確保對您網站的影響最小， iframe-resizer進行了高度優化，並利用集合理論來確保它只檢查影響 iframe 大小的頁面元素。

即使在最複雜的頁面上， iframe-resizer也可以檢測 HTML 和 CSS 的更改，計算修改後的內容尺寸並在亞毫秒時間內更新 iframe。

跨域

透過一個簡單的 JS 檔案支援內部（同域）和外部（跨網域）iframe，該檔案被設計為對託管它的網站的零影響來賓。

擴充API

此外， iframe-resizer還提供了一系列缺少的瀏覽器 API 功能，可讓您將 iframe 內容與父頁面安全地整合。

• 相對於 iframe 或父親頁面的位置捲動頁面
• 獲取iframe的位置、滾動位置和父頁面視口的詳細信息
• 修復了 iframe 中的頁面連結並允許連結傳播到父頁面
• 將onMouseEnter和onMouseLeave事件加入到 iframe 元素
• 簡化 iframe 和父親頁面之間的訊息傳遞
• 自動域認證
• 增強的輔助功能

與viewer.js結合使用時，它甚至可以調整包含PDF和ODF文件的iframe的大小。

設定和 API 指南

請參閱iframe-resizer網站以取得設定指南和 API 文件。這包括以下版本：

• 香草JS
• 反應
• 維埃
• 角
• jQuery

以及以下設定指南：

• WordPress
• 谷歌應用腳本

它們也是支援創建其他自訂元件的 API。

版本5

此版本的 iframe-resizer 已被廣泛重寫，以使用現代瀏覽器 API，這在檢測內容大小調整事件方面實現了顯著更好的效能和更高的準確性。

在這個版本中，我們有機會刷新和簡化 API，如果您來自先前的版本，那麼他們有一個升級指南來解釋這些變更。

主要套餐

對於版本 5， iframe-resizer分為兩個主要包，以便更輕鬆地跨不同網域部署並更好地支援樹搖動。這兩個套件可以從 NPM 安裝，也可以作為 zip 檔案下載。

@iframe-resizer/父級

父頁麵包設定一個 iframe 以自動調整內容大小。它們是這個包的幾個流行庫和框架的版本（見下文）。

@iframe-resizer/child

該套件需要載入到 iframe 中，在初始化之前它將靜靜地等待來自父頁面的訊息。它被設計為成為其他網站上的好客人。

框架和函式庫

除了兩個主包之外，它們是適用於以下平台的父包版本。

@iframe-resizer/react

父頁面的React元件。

@iframe-resizer/vue

父頁面的Vue元件。

@iframe-resizer/jquery

父親頁面的簡單jQuery包裝器。

應用程式介面

@iframe-resizer/核心

父頁面的核心 API（由@iframe-resizer/parent使用）以及框架和庫元件版本。

---

版權所有 © 2013-24 David J. Bradshaw - 根據 GPL V3 許可