貼上一個 URL,選擇你的寬度和高度,切換幾個選項,然後複製乾淨的 <iframe> 嵌入 HTML —— 用於你的 Knocket 頁面、影片、地圖或瀏覽器可以顯示的任何內容。檢視即時預覽,然後將程式碼貼上到你的網站中。無需登入,也不儲存任何內容。
空白預覽?該網站阻止了嵌入——程式碼仍然是正確的。
最實用嵌入內容是一個能讓別人聯絡到你的頁面。一個免費的Knocket聯絡名片就是為嵌入而設計——將其放在你的網站上,訪客即可獲得線上聊天、WhatsApp、電子郵件和預約功能,而你無需編寫表單或搭建後端。 建立免費頁面 →
在一個頁面中嵌入另一個頁面是最早的網頁原語之一,但手動編寫<iframe>標籤——具有正確的寬度、螢幕閱讀器的標題、延遲載入和安全沙盒——既繁瑣又容易出錯。生成器每次都能正確生成,並在你釋出之前顯示結果。
在 WordPress 的自定義 HTML 塊中,在 Wix 的程式碼嵌入中,在 Squarespace 的嵌入塊中,或直接嵌入到你網站的 HTML 中。在 React/Astro 佈局中,通過原始 HTML 元素插入<iframe>。該標籤是自包含的——無需載入指令碼或樣式表。
iframe非常適合在你的頁面內展示另一個網頁。但當你需要以下功能時,它並非合適工具:
X-Frame-Options: DENY 標頭的網站 —— 谷歌、Instagram 和大多數登入頁面拒絕被嵌入框架。為了獲得原生整合在你網站上的聯絡體驗(無需 iframe,使用你的域名和樣式),Knocket 小部件只需要一個指令碼標籤。
是的——完全免費,無需登入,沒有限制。HTML在你的瀏覽器中生成,沒有任何內容被上傳或儲存。你可以生成任意數量的嵌入程式碼。
你要嵌入的網站傳送了一個 X-Frame-Options 或 Content-Security-Policy 頭部,拒絕被嵌入。Google、Instagram、Facebook 和大多數需要登入的頁面都會這樣做。生成的程式碼仍然是正確的——只是該網站不允許自己被任何人嵌入到任何地方。Knocket 頁面和大多數影片播放器(YouTube、Vimeo)允許嵌入。
sandbox 屬性限制了嵌入頁面可以執行的操作,因此不受信任的嵌入內容無法彈出視窗、執行表單或訪問你的頁面。受限(推薦)允許嵌入內容執行指令碼和表單,但阻止危險操作;嚴格僅允許指令碼。對於需要完整功能且受信任的頁面,請將其關閉。
iframe 上的 title 屬性會告訴螢幕閱讀器其中的內容——這對於可訪問性至關重要。如果沒有它,使用輔助技術的訪客只會聽到“框架”,而沒有上下文。始終將其設定為描述嵌入內容(例如“Knocket 聯絡名片”)。
當嵌入內容應填滿其容器時(大多數現代網站),使用 響應式(100% 寬度)。當你需要精確尺寸時(如影片播放器或方形地圖),使用 固定寬度和高度。響應式嵌入通常與頁面上的寬高比包裝器配合使用。
是的。loading="lazy" 告訴瀏覽器僅在使用者滾動到 iframe 附近時才載入它,從而加快初始頁面載入速度 —— 尤其是在一個頁面上有多個嵌入內容時特別有用。
不。所有內容均在你的瀏覽器中執行——URL、標題和選項從未離開你的裝置。沒有伺服器、沒有資料庫、沒有賬戶。
是的——而且這是一個很好的用途。你的 Knocket 聯絡名片旨在嵌入:訪客可以直接在你的網站上獲得線上聊天、WhatsApp、電子郵件和預訂,無需填寫表單或編寫後端。貼上你的 knocket.trtc.io/your-handle 網址並複製程式碼。
最適合嵌入的是能讓人聯絡到你的事物。一個 Knocket 頁面可以將線上聊天、WhatsApp、電子郵件和預約功能帶到任何網站。
建立你的免費頁面