Есть ли способ получить «ширину» и «высоту» «<iframe>» в бэкэнде?

Question

Я пишу серверную часть для службы встраивания изображений. Мы думаем о поддержке встраивания с помощью iframe, похожего на YouTube.

Например:

<iframe type="text/html" src="http://example.com/photos/embed/abc/" width="640px" height="480px" frameborder="1"> </iframe>

Использование вышеуказанного iframe в любом месте должно включать изображение в iframe (вместе с некоторыми дополнительными вещами, такими как заголовок и т. Д.). Однако я хотел бы вернуть изображение такого же размера, как «ширина» и «высота», указанные в iframe. Я полагаю, что изменение размера изображения должно происходить на сервере, чтобы это работало.

В этом случае мне нужно, чтобы ширина и высота iframe были доступны на бэкэнде. Есть ли способ выяснить это на бэкэнде? Например, они являются частью HTTP-запроса или чего-то в этом роде?

PS: я использую Django для бэкенда (если это поможет)

Answer 1

В вашем примере страница / скрипт [http://example.com/photos/embed/abc/] не может получить значение ширины / высоты.Но вы можете передавать переменные ширины / высоты в URL, например

<iframe type="text/html" src="http://example.com/photos/embed/abc/?width=640&height=480" width="640px" height="480px" frameborder="1"> </iframe>

Answer 2

Нет, размер iframe на внутреннем сервере недоступен.

Поскольку вы отображаете страницу в iframe, а не изображение напрямую, эта страница может использовать клиентский скрипт для получения размераiframe и отправьте эту информацию вместе в URL-адресе в теге изображения.

Что-то вроде:

window.onload = function(){
  var b = document.body;
  if (window.opera) b = b.parentNode;
  var img = document.createElement('img');
  img.src = 'http://example.com/photos/embed/abc/?w=' + b.clientWidth + '&h=' + b.clientHeight;
  img.alt = '';
  document.body.appendChild(img);
}

Этот стиль может также понадобиться на странице, чтобы элемент body занимална полную высоту фрейма:

html,body { height: 100%; }

Answer 3

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

<script type="text/javascript">

$(document).ready(function() {
  var frame = $('#myiframeid');
  var width = frame.attr('width');
  var height = frame.attr('height');
  var url = 'http://example.com/photos/embed/abc/?w=' + width + '&h=' + height;

  frame.attr('src', url);
});

</script>

<iframe id="myiframeid" type="text/html" src="myemptyblankpage.html" width="640px" height="480px" frameborder="1"> </iframe>

Надеюсь, это поможет.