Изменение размера iframe для размещения в родительском div

#javascript #css #iframe #divi

Вопрос:

Я создал анимацию Adobe Edge, которую экспортировал в виде адаптивного HTML и Javascript.

Вы можете просмотреть анимацию здесь в виде одного html-файла: (u: демонстрация p: тестирование)

https://boomboxdevdev.wpengine.com/boombox_anim/boombox_HTML5_Canvas.html

Теперь я хочу использовать iframe для встраивания анимации в модуль кода divi.

Я сделал это, и это можно посмотреть здесь: (u: демонстрация p: тестирование)

https://boomboxdevdev.wpengine.com/

Я пытаюсь точно подогнать iframe к родительскому div, но не могу понять, как это сделать.

Я использую wordpress с разделением их и построителем страниц.

Ответ №1:

Короткий ответ: без контроля как родительского, так и исходного кода iframe вы не сможете.

Весь смысл if iframes в том, что родитель понятия не имеет, что работает внутри iframe, и не имеет доступа ни к чему внутри него. В противном случае это было бы невероятно небезопасно (и на самом деле так было раньше. Когда-то давным-давно вы могли просто встроить веб-сайт банка в iframe, а затем запросить его. Это было дикое время) поэтому, если вы знаете размер своего контента: сделайте разметку iframe такой, чтобы использовать этот размер, указав width и height атрибуты.

Если вы этого не сделаете: вам придется согласовать динамическое изменение размера с помощью postMessage, где вы убедитесь, что на странице iframe есть JS, чтобы принять сообщение с запросом о размерах содержимого, чтобы родитель мог опубликовать это сообщение и вернуть ширину/высоту, которые он затем может использовать для изменения размера элемента iframe.

Или, если это не вариант: вам не повезло.

1. Спасибо всем за помощь. Я думаю, что пойду другим путем. Я пытаюсь встроить анимацию Adobe Edge, и я думаю, что iFrames-это действительно небрежный способ сделать это.

2. абсолютно: если вы можете экспортировать как собственное веб-решение, которое вы можете просто разместить непосредственно на своей странице, это бесконечно предпочтительнее, чем iframes.

Ответ №2:

Одна из ваших проблем заключается в том, что ваш iframe имеет следующую загрузку

 onload="this.width=screen.width;this.height=screen.height"

Таким образом, iframe остается на высоте экрана, на который он загружен, независимо от содержимого, но максимальная ширина ограничена 100%. В то время как содержимое iframe содержит некоторый код, который динамически изменяет его размер. Вы можете попробовать взломать что-то, чтобы установить размеры на основе окна просмотра и размеров, которые, как вы знаете, будут также содержимым iframe, так как у вас есть контроль над этим, но если есть какие-либо изменения, вам придется это повторить.

Но если у вас есть все это, не могли бы вы взять html и сгенерированные сценарии и перенести их на страницу как еще один элемент, а не использовать iframe?