получить все iFrames внутри div и изменить их размер для мобильных устройств

Question

Короче говоря, проблема в следующем: у нас есть новостной сайт, на котором есть мобильная версия сайта. Для страницы, которая отображает какую бы статью ни называли, иногда есть встроенные видео (из youtube), которые отображаются в фреймах. Их размер по умолчанию обычно составляет около 580 пикселей, что, очевидно, слишком велико и широко в мобильном браузере.

Я хотел использовать javascript для поиска содержимого и изменения размера любого iframe, как он его находит. Тем не менее, я не знаю, будет ли лучше использовать JavaScript на мобильных устройствах, и, во-вторых, я не уверен, как искать все экземпляры определенного типа элемента, подобного этому. Фреймы не имеют имен или идентификаторов ...

Я кратко рассмотрел использование PHP для поиска <iframe, но кажется, что php в этом случае будет излишне небрежным и потенциально легко сломанным.

У кого-нибудь есть советы / предложения по решению этой проблемы?

Answer 1

Используя jQuery, очень легко выбирать элементы на основе тега.

JQuery:

$('iframe').width(300);

Довольно просто, используя обычный DOM.

var iframes = document.getElementsByTagName('iframe');
    for (var i=0; i<iframes.length; i++)
    {
      iframes[i].style.width = "300px"
    }

Answer 2

Используя jQuery, изменить размер всех iframes в документе так же просто, как набрать, например,

$('iframe').css('width', '200px');

Несомненно, jQuery имеет накладные расходы по размеру, но минимизирован и сжат, его площадь не так велика, даже для мобильных приложений.

Answer 3

Это сработало для меня:

Просто включите поле ширины, которое вы хотите в верхней части:

//Just Change this
var margin = "20";
//////////////////////////////////////////////////////
var iframes = document.getElementsByTagName('iframe');
var w = window.innerWidth || document.body.clientWidth;
var newwidth = w - ( 2 * margin );

for (var i=0; i<iframes.length; i++)
{
 var currentheight = iframes[i].height;
 var currentwidth  = iframes[i].width;  
 var newheight = (newwidth / currentwidth) * currentheight;

  iframes[i].style.width = newwidth+"px";
  iframes[i].style.height = newheight+"px";
}