Коротко — есть два рабочих способа встраивать iframe в игру на Construct 2, и ни один из них не требует стороннего «iframe‑плагина».
1) Вставить игру в iframe на странице
- Если вам нужно просто разместить весь экспорт игры на сторонней странице — в HTML страницы оберните URL экспорта (index.html) в iframe:
<iframe src="https://example.com/yourgame/index.html" style="width:100%;height:600px;border:0;"></iframe>
- Ограничения: многие сайты/страницы запрещают встраивание через заголовок X-Frame-Options или CSP (frame-ancestors). Также на мобильных браузерах могут быть нюансы с фокусом/полным экраном.
2) Вставить iframe внутрь самой игры (DOM‑элемент над canvas)
- Это самый гибкий способ: при экспорте Construct 2 генерирует обычную HTML страницу, в которой есть canvas. Вы можете добавить iframe в этот HTML либо динамически создать его из кода игры через Browser -> Execute JavaScript (встроенный Browser плагин позволяет выполнить JS).
- Пример JS, который можно выполнить через Browser → Execute Javascript (или вставить в экспортируемый index.html):
var ifr = document.createElement('iframe');
ifr.id = 'myIframe';
ifr.src = 'https://example.com';
ifr.style.position = 'absolute';
ifr.style.left = (document.body.getBoundingClientRect().left + 0) + 'px';
ifr.style.top = '0px';
ifr.style.width = '100%';
ifr.style.height = '100%';
ifr.style.zIndex = 9999; // выше canvas
ifr.style.border = '0';
ifr.style.pointerEvents = 'auto'; // чтобы iframe перехватывал клики
document.body.appendChild(ifr);
- Если нужно привязать iframe к положению/масштабу canvas (при ресайзе/масштабировании Construct), лучше вставлять iframe в тот же контейнер, где лежит canvas, и обновлять его размеры при событии resize. Пример привязки к первому canvas:
var canvas = document.getElementsByTagName('canvas')[0];
canvas.parentNode.appendChild(ifr);
ifr.style.left = canvas.offsetLeft + 'px';
ifr.style.top = canvas.offsetTop + 'px';
ifr.style.width = canvas.offsetWidth + 'px';
ifr.style.height = canvas.offsetHeight + 'px';
- Чтобы скрыть/удалить iframe:
var e = document.getElementById('myIframe');
if (e) e.parentNode.removeChild(e);
Важно — ограничения и подводные камни
- Нельзя встраивать страницы, которые запрещают фреймы через X-Frame-Options: SAMEORIGIN или DENY — в этом случае iframe не загрузится.
- Коммуникация между игрой и содержимым iframe: используйте window.postMessage и слушайте message.
- Если iframe открыт поверх canvas, то события мыши/тача будут приходить в iframe (обычно это то, что нужно). Если хотите, чтобы некоторые клики проходили в canvas, пользуйтесь pointer-events CSS.
- Если хотите всё на одном уровне DOM (без редактирования экспортов), используйте Browser.ExecuteJavascript в событиях C2, чтобы создавать/удалять iframe динамически.
Про скачанный плагин
- Частая причина ошибки: плагин не совместим с вашей версией Construct (например, плагин для Construct 3 или требующий иной версии runtime), либо вы неправильно установили файлы. Напишите точный текст ошибки (или приложите скриншот) и версию Construct 2 — тогда смогу подсказать точнее. Но в большинстве случаев вышеописанные способы решают задачу без сторонних плагинов.
Если хотите — напишите:
- какую именно задачу решаете (встраиваете внешнюю страницу в игру или игру в страницу);
- версию Construct 2;
- текст ошибки от плагина (или скрин). Тогда дам конкретные инструкции/исправление.