Могу ли я поместить содержимое iframe в размер видового экрана?

Question

Я пытаюсь создать викторину, которая может быть встроена на другой веб-сайт (и является отзывчивой), так же, как встраивание YouTube. Когда iframe используется, я хотел бы, чтобы он соответствовал видовому экрану мобильного экрана. Возможно ли это и как я могу это достичь?

В настоящее время я попытался сделать отзывчивый полноэкранный Bootstrap modal, загружающий iframe, но проблема в том, что мы не контролируем содержимое родительской страницы, за исключением небольшого фрагмента встраиваемого кода (так как это будет внедрено, я не могу сделать любые предположения о библиотеках, которые включены в родительскую веб-страницу и т. д.)

<div> 
    <iframe src="http://server/quiz/embed/{{quiz_id}}" style="" frameBorder="0" width="100%" height="768"></iframe> 
</div> 

Answer 1

В целом: нет. Изменение размера вашего iframe является модификацией DOM родительского сайта. Это невозможно с помощью кода для встраивания, который вы используете в настоящее время, поскольку ограничения, связанные с перекрестным происхождением, не позволяют коду, запущенному в вашем фрейме, получить доступ к родительскому окну. ^†

варианты:

1. Изменить код. Попросите своих пользователей вставить ссылку на динамически созданный файл Javascript, который устанавливает междоменный доступ (например, с помощью window.postMessage), а затем создает тег iframe, аналогичный тому, что в настоящее время внедряется.

2. Идите с другим решением полностью. Рассмотрите возможность использования window.open или <a target="_blank"> для создания «обычного» всплывающего окна; это не требует специальной настройки на вашем фрейме.

---

†: То есть, если он случайно не случается на том же происхождение, что и встроенного контента. Но это маловероятно в общем случае.