Studio 編輯器：新增 HTML iFrame 元件
2 分鐘
在 HTML iFrame 中顯示來自外部伺服器和其他來源的視覺內容。建立天氣小工具、股市小工具、行事曆或任何想到的自訂元件。您可內嵌程式碼片段或外部網址。
內嵌程式碼或網站
直接從「新增元件」面板將 iFrame 新增至客戶網站。選擇要內嵌程式碼或網站，然後貼上程式碼或網址，使其顯現在 iFrame 中。
重要：
內嵌程式碼前，請務必閱讀我們的指南與限制。
若要新增 HTML iFrame：
- 點擊編輯器左側的 新增元件
。 - 點擊 內嵌與社交。
- 選擇元件以將其新增至頁面，然後按照以下相關步驟操作：
內嵌程式碼
內嵌網站
調整顯示內容的大小
内嵌元件通常包含以 Pix 為單位的預設寬度和高度，由取得服務的來源界定，如下方範例所示：
1<iframe width="560" height="315"
2 src="https://www.wix.com/studio/academy"
3 frameborder="0">
4</iframe>若 iFrame 容器（位於畫布上）小於 560 像素 * 315 像素，這些設定可能會裁切內容。若要確保內容不被裁切，請將像素金額取代為百分比單位，並將其設定為 100％，如下所示：
1<iframe width="100%" height="100%"
2 src="https://www.wix.com/studio/academy"
3 frameborder="0">
4</iframe>
指南與限制
閱讀追蹤中指南和限制，了解方法將網址或自訂程式碼正確內嵌至 HTML iFrame。
指南
- 請確保程式碼包含 HTTPS 而非 HTTP，否則將無法在已上線網站中顯示。
- 請務必確保內嵌的程式碼為最新版本且與 HTML5 相容。若頁面和指令碼是使用舊版 HTML 編寫，大多數瀏覽器將無法正常顯示。
- HTML 程式碼包含頁面的核心元件，但設計設定和其他複雜功能通常會分開儲存。因此，如果 HTML 程式碼中未包含相關元件（例如 CSS 和 JS 檔案）作為參考，某些元件可能無法運作或外觀有所不同。
- 若不確定如何使用 target 屬性，請在此閱讀相關資訊或聯絡程式碼創作者。
限制
HTML 元件中的程式碼會顯示在客戶網站的沙箱化 iFrame 中。使用沙箱可保護訪客免受自訂程式碼潛在副作用的影響。
通常，沙箱化 iFrame 會封鎖以下項目：
- 使用瀏覽器 API
- 使用外掛程式的內容（透過
- 自動觸發的功能（例如自動播放影片或自動聚焦表單控制項）
然而，根據 W3C 規範，我們已為您的自訂程式碼重新啟用以下功能：
沙箱 | 描述 |
|---|---|
allow-same-origin（允許同源） | 重新啟用第三方網站指令碼／內容 |
allow-forms（允許表單） | 重新啟用表單提交 |
allow-popups（允許快顯） | 重新啟用快顯 |
allow-scripts（允許指令碼） | 重新啟用自訂 JavaScript 程式碼 |
allow-pointer-lock（允許鼠標鎖定） | 重新啟用擷取游標 |