先確定要嵌入什麼
搜索‘embed code for games’時,先區分三種地址:介紹或商店頁面、購買組件、實際運行遊戲的頁面。鏈接到作品不等於把遊戲放進 iframe,商店卡片也不一定是可玩的版本。只對自己的構建或明確獲授權的作品使用嵌入。
有些託管服務會為上傳的 HTML5 項目配置內部遊戲框架,例如 itch.io 的 HTML5 發佈流程。但這不表示任意第三方作品都允許外站嵌入。使用託管方為你的項目提供的公開嵌入方式,不從其他頁面扒出私有資源地址。PixelGamesHub 本身不提供嵌入服務或遊戲託管。
從受限的框架開始
下面是你控制的網站中的 HTML 教學片段,不是在線嵌入工具。把示例域名替換成你控制的、獨立來源上的 HTTPS 遊戲入口;補充準確的標題與文字鏈接。遊戲應當在框架加載後等待玩家啟動。
示例的 sandbox 只放開腳本和指針鎖定,故意不放開同源存儲、彈窗、表單或頂層導航。某些構建會因此無法存檔或加載;先查看錯誤和引擎要求,再對可信的獨立來源逐項評估權限,不要為了‘能跑’就刪除所有限制。
<iframe
src="https://game.example.com/index.html"
title="Play your game"
width="960" height="540"
style="width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;"
loading="lazy"
allow="fullscreen"
sandbox="allow-scripts allow-pointer-lock"
></iframe>
<a href="https://game.example.com/index.html">Open the game directly</a>框架打不開怎麼排查
先直接打開遊戲地址。如果直接也打不開,先解決構建或託管問題;直接能打開而框架失敗,再檢查瀏覽器控制台、網絡請求和嵌入兩端的響應頭。遊戲響應的 CSP frame-ancestors 或 X-Frame-Options 可以禁止嵌入,宿主頁面的 frame-src 也可以限制允許加載的來源。
跨域並不自動等於不能用 iframe,打開 CORS 也不是解決所有嵌入失敗的方法。如果你不控制遊戲服務器,向所有者索取許可和受支持入口,或改成普通鏈接。不要代理第三方內容、剝離安全響應頭或繞過訪問控制。
測試輸入和顯示
在實際宿主頁面測試一次完整的開始、移動、重開和退出。確認玩家知道何時鍵盤焦點進入遊戲,能離開框架繼續瀏覽;也要檢查滾動、尺寸變化、全屏按鈕和聲音啟動。16:9 是示例比例,不是所有遊戲的正確比例。
網頁裡能顯示不等於能在手機上操作。觸控、橫豎屏、外接鍵盤和桌面鼠標要分別驗證。安全提示也不要一概忽略:同源遊戲同時獲得 allow-scripts 和 allow-same-origin 可能削弱沙盒隔離;優先使用獨立來源,並只給當前構建真正需要的權限。
官方參考資料
資料核對日期: . 封面是保留署名的真實遊戲截圖,不是這篇教程的輸出示例。
